純粋な 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を使用していますが、解決策を知っている人はいますか?