为什么svg上的转换没有延迟地在DOMContentLoaded上工作？

Question

我有一个svg，其上设置了过渡。 现在当我向它添加一个具有一些属性变化的类时，只有在DOMContentLoaded事件和addclass事件之间添加延迟时才会发生转换。 这里有两个例子，第一个没有延迟第二个有无限延迟：

不延误：

 ! function() { window.addEventListener('DOMContentLoaded', function() { var logo2 = document.querySelector("svg"); logo2.classList.add('start'); }); }(); 

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.75 32.46"> <defs> <style> polygon { fill: red; transition: opacity 3s ease-out, transform 3s ease-out; opacity: 0; } .start polygon { opacity: 1; } #A1 polygon { transform: translate(100px, 100px); transition-delay: 1s; } /*styles after animation starts*/ .start #A1 polygon { transform: translate(0px, 0px); } </style> </defs> <title>Logo</title> <g id="A1"> <polygon class="right" points="0.33 31.97 0.81 26.09 13.61 3.84 13.13 9.72 0.33 31.97" /> </g> </svg> 

延迟：

 ! function() { window.addEventListener('DOMContentLoaded', function() { var logo2 = document.querySelector("svg"); setTimeout(function(){ logo2.classList.add('start'); },0); }); }(); 

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.75 32.46"> <defs> <style> polygon { fill: red; transition: opacity 3s ease-out, transform 3s ease-out; opacity: 0; } .start polygon { opacity: 1; } #A1 polygon { transform: translate(100px, 100px); transition-delay: 1s; } /*styles after animation starts*/ .start #A1 polygon { transform: translate(0px, 0px); } </style> </defs> <title>Logo</title> <g id="A1"> <polygon class="right" points="0.33 31.97 0.81 26.09 13.61 3.84 13.13 9.72 0.33 31.97" /> </g> </svg> 

正如您在第二个示例中所看到的，我添加了0秒的延迟，但它导致动画工作，为什么？

Update1：​​嗯...我们都错了:-)

我尝试了没有DOMContentLoaded的相同代码，没有延迟。 它仍然没有延迟添加过渡：

 ! function() { var logo2 = document.querySelector("svg"); logo2.classList.add('start'); }(); 

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.75 32.46"> <defs> <style> polygon { fill: red; transition: opacity 3s ease-out, transform 3s ease-out; opacity: 0; } .start polygon { opacity: 1; } #A1 polygon { transform: translate(100px, 100px); transition-delay: 1s; } /*styles after animation starts*/ .start #A1 polygon { transform: translate(0px, 0px); } </style> </defs> <title>Logo</title> <g id="A1"> <polygon class="right" points="0.33 31.97 0.81 26.09 13.61 3.84 13.13 9.72 0.33 31.97" /> </g> </svg> 

我还注意到jQuery不会导致重排。 下面是一个内联jquery代码的示例，在加载CSSOM之前仍然不会触发ready函数。 如果我们有外部jquery，那么在CSSOM准备就绪之后就会触发就绪事件，而不是内联jquery。 我已经达成的理解是CSSOM在渲染html dom后需要几毫秒。 所以直到下载外部jquery CSSOM就准备好了。 DOMContentLoaded根本不关心是否加载样式表，也就是说它不关心CSSOM是否准备就绪。

Answer 1

因为这就是DOMContentLoaded的作用：它在解析DOM时触发，但在CSSOM之前触发（因此在应用样式之前）。

如果您不想等待load事件，
一种方法是通过在任何文档的元素（例如<body> ）上调用offsetXXX属性来强制浏览器在脚本执行（同步）之前绘制：

 ! function() { window.addEventListener('DOMContentLoaded', function(){ document.body.offsetTop; // force a CSS repaint var logo2 = document.querySelector("svg"); logo2.classList.add('start'); }); }(); 

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.75 32.46"> <defs> <style> polygon { fill: red; transition: opacity 3s ease-out, transform 3s ease-out; opacity: 0; } .start polygon { opacity: 1; } #A1 polygon { transform: translate(100px, 100px); transition-delay: 1s; } /*styles after animation starts*/ .start #A1 polygon { transform: translate(0px, 0px); } </style> </defs> <title>Logo</title> <g id="A1"> <polygon class="right" points="0.33 31.97 0.81 26.09 13.61 3.84 13.13 9.72 0.33 31.97" /> </g> </svg> 

Answer 2

正如您在第二个示例中所看到的，我添加了0秒的延迟，但它 导致动画工作，为什么？

由于在DOMContentLoaded事件触发时尚未加载CSS对象模型

完全加载和解析初始HTML文档时会触发DOMContentLoaded事件，而无需等待样式表，图像和子帧完成加载。 应该仅使用非常不同的事件加载来检测完全加载的页面。 使用负载是一个非常流行的错误，其中DOMContentLoaded会更合适，所以要小心。

https://developer.mozilla.org/en/docs/Web/Events/DOMContentLoaded

因此，添加css类将不会运行动画。

setTimeOut方法是一个javascript事件，一旦被触发（即使有0次），它将被添加到当前浏览器执行队列的末尾（在你的情况下将在加载CSS模型后添加）。 因此动画将正常启动。

更新：

但是加载CSSOM后jquery domready会激活。 因此，所有这些 帖子在技术上都是不正确的吗？

domready使用DOMContentLoaded所以从理论上讲，它们的行为方式相同。

是否在 加载CSSOM 之前执行了延迟脚本标记（内联或外部） ？

由defer属性延迟的脚本在触发DOMContentLoaded之前执行。 所以答案是肯定的。