2

考虑到下面这个简单的例子，我想知道为什么在使用 DOMContentLoaded 时没有触发 CSS3 过渡效果？使用 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>
4

2 回答 2

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

演示

于 2014-05-11T17:30:17.530 回答
0

MDN 文档说 DOMContentLoaded 事件无需等待样式表即可发生：

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);
于 2017-01-06T22:28:17.423 回答