2

次の簡単な例を考えると、DOMContentLoaded を使用しているときに CSS3 トランジション効果がトリガーされないのはなぜでしょうか? window.onload または document.onreadystatechange = "complete" を使用するとうまくいきます!

DOMContentLoaded が [style] を待たないことは知っていますが、その場合は外部スタイルシートを参照しません!

サポートされている場合、ほとんどの DomReady-Engine は DOMContentLoaded にフォールバックします! 誰かが私のためにこの問題についていくつかのアイデアや情報を持っているかもしれません! 前もって感謝します！

例：

<!DOCTYPE html>
<html>
<head>
<script>
window.document.addEventListener('DOMContentLoaded', function() {
    var elem = window.document.getElementById('box1');
        elem.style.height = '400px';
        elem.style.transition = "height 1s ease-in";
}, false);
</script>
</head>
<body>
<div id="box1" style="display:block; background-color:green; position:absolute; width:400px; height:100px;" >Doesn't animate in IE, Opera, Chrome etc.. but often in FIREFOX</div>
</body>
</html>
4

2 に答える 2