css3转换不会触发DOMContentLoaded

考虑到下面这个简单的例子，我想知道为什么使用时不触发CSS3的过渡效果DOMContentLoaded ?内使用窗口。加载或文档。Onreadystatechange = "complete"就可以了!

我知道DOMContentLoaded不等待[style]，但在这种情况下，我不引用外部样式表!

大多数DomReady-Engines将回落到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>

你应该把高度改变在一个小的setTimeout中，以确保在行运行时过渡属性已经应用

window.document.addEventListener('DOMContentLoaded', function() {
    var elem = document.getElementById('box1');
    elem.style.setProperty("transition", "height 1s ease-in");
    setTimeout(function() {
        elem.style.height = '400px';
    }, 10);
}, false);

MDN文档说DOMContentLoaded事件发生时不需要等待样式表:

DOMContentLoaded事件被触发时，初始HTML文档已经完全加载和解析，无需等待样式表;图片和子帧来完成加载。

MDN文档没有规定样式表、图像或子框架必须是外部的。显然，DOMContentLoaded事件甚至在加载本地定义的样式表之前就被触发了。

似乎使用setTimeout()将所需属性的设置延迟一小段时间，例如10毫秒，在大多数情况下足以让浏览器完成样式表的加载。然而，使用setTimeout()显然不是实现目标的可靠方法，因为在某些情况下，所有样式表的完全加载可能会超过setTimeout()中指定的超时。

你的过渡工作与窗口。加载或文档。Onreadystatechange，因为这些事件在完成加载窗口或文档(包括样式表)时触发。因此，您可以这样使用:

window.addEventListener('load', function() {
    var elem = window.document.getElementById('box1');
        elem.style.height = '400px';
        elem.style.transition = "height 1s ease-in";
}, false);

相关内容

最新更新

热门标签：