3

純粋な CSS で簡単なトランジションを作成しようとすると、すべて正常に動作します。
しかし、リンクをクリックしたときに CSS を変更する JavaScript 関数を呼び出そうとすると、遷移がありません。グレーのレイヤーでフェードインしたい。

HTML:

<a href="someImage.jpg" id="test">
    <img src="someImage.jpg" alt="" />
</a>
<section id="grey"> 
</section>

JS:

var grey = document.getElementById("grey");
var link = document.getElementById("test");
link.onclick = function () {
    grey.style.display = "block";
    grey.style.opacity = "1";
    return false;
};

CSS:

section {
    display:none;
    size and position...
    opacity: 0;
    background-color: rgba(0,0,0,0.5);
    transition: opacity 1s .5s;
}

( http://jsfiddle.net/7zEhx/5/を参照)

私はFF22を使用していますが、解決策を知っている人はいますか?

4

1 に答える 1

4

display: none要素は遷移せずdisplay: block、他のスタイルを設定する前に開始されていません。次のような恐ろしいハックがあります。

setTimeout(function() {
    grey.style.opacity = "1";
}, 0);

しかし、設定widthする0代わりに に設定displayしてから、 に戻し100%ます。
更新されたjsFiddle

于 2013-06-30T23:37:16.000 に答える