Question

包含以下简单示例，我想知道为什么在使用时不会触发CSS3过渡效果 DOMContentLoaded？使用window.onload或document.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>

Answer 1

您应该将高度变化放在一个小的setTimeout中，以确保在线路运行时应用了过渡属性

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

Demo

Answer 2

MDN documentation表示DOMContentLoaded事件在不等待样式表的情况下发生：

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

MDN文档未声明样式表，图像或子帧必须是外部的。显然，甚至在加载本地定义的样式表之前就会触发DOMContentLoaded事件。

在大多数情况下，使用setTimeout（）延迟设置所需属性的时间很短，例如10毫秒，足以让浏览器完成样式表的加载。但是，使用setTimeout（）显然不是实现目标的可靠方法，因为可能存在所有样式表的完全加载可能超过setTimeout（）中指定的超时的情况。

您的转换适用于window.onload或document.onreadystatechange，因为在完全加载窗口或文档（包括样式表）时会触发这些事件。因此，您可以使用以下内容：

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

在DOMContentLoaded上不会触发css3转换

2 个答案: