css3 转换不会在 DOMContentLoaded 上触发答案

【问题标题】：css3 transition does not trigger on DOMContentLoadedcss3 转换不会在 DOMContentLoaded 上触发
【发布时间】：2014-06-28 11:07:41
【问题描述】：

考虑到下面这个简单的例子，想知道为什么在使用的时候没有触发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>

【问题讨论】：

你最终解决了这个问题吗？
介意我的回答怎么解决不了？
它与异步执行（setTimeout）一起工作，但这不是我的目标
我在这里回答了这个问题：stackoverflow.com/a/46991428/1026
Why don't transitions on svg work on DOMContentLoaded without delay?的可能重复

标签： css-transitions domcontentloaded

【解决方案1】：

您应该将高度变化放在一个小的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);

Demo

【讨论】：

感谢您的输入，它与 setTimeout 一起使用！但是为什么它会触发 onload 事件呢？

【解决方案2】：

MDN documentation 表示 DOMContentLoaded 事件无需等待样式表即可发生：

当初始 HTML 文档具有完全加载和解析，无需等待样式表，图像和子帧以完成加载。

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);

【讨论】：