Javascript 为什么不'；svg上的t转换是否可以在DOMContentLoaded上毫不延迟地工作？

我有一个设置了转换的svg。现在，当我向其中添加一个属性不同的类时，只有在DOMContentLoaded事件和addclass事件之间添加延迟时，才会发生转换。这里有两个示例，第一个没有延迟，第二个有无穷大的延迟：

毫不迟延：

！函数（）{
addEventListener（'DOMContentLoaded'，function（）{
var logo2=document.querySelector（“svg”）；
logo2.classList.add（'start'）；
});
}();

多边形{
填充物：红色；
过渡：不透明度3s减缓，变换3s减缓；
不透明度：0；
}
.开始多边形{
不透明度：1；
}
#A1多边形{
转换：转换（100px，100px）；
过渡延迟：1s；
}
/*动画开始后的样式*/
.开始#A1多边形{
转换：转换（0px，0px）；
}
标志
因为它就是这样做的：它在解析DOM时触发，但在CSSOM之前触发（因此在应用样式之前）

如果您不想等待
加载事件，

一种方法是在脚本执行之前（同步）强制浏览器绘制，方法是在任何文档的元素上调用
offsetXXX
属性（例如
）：


！函数（）{
addEventListener（'DOMContentLoaded'，function（）{
document.body.offsetTop；//强制CSS重新绘制
var logo2=document.querySelector（“svg”）；
logo2.classList.add（'start'）；
});
}();

多边形{
填充物：红色；
过渡：不透明度3s减缓，变换3s减缓；
不透明度：0；
}
.开始多边形{
不透明度：1；
}
#A1多边形{
转换：转换（100px，100px）；
过渡延迟：1s；
}
/*动画开始后的样式*/
.开始#A1多边形{
转换：转换（0px，0px）；
}
标志

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

因为当触发
DOMContentLoaded
事件时，CSS对象模型尚未加载

当初始HTML文档已加载时，将触发DOMContentLoaded事件
已完全加载和分析，无需等待样式表，
完成加载的图像和子帧。非常不同的事件负载
应仅用于检测完全加载的页面。这是一场难以置信的比赛
在DOMContentLoaded可能更大的地方使用load是一个普遍的错误
适当，所以要谨慎


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

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

更新：

但是jquery domready在CSSOM加载后激发。所有这些都是
SO上的帖子在技术上不正确？

domready
使用
DOMContentLoaded
因此从理论上讲，它们的行为方式相同

是在
CSSOM是否已加载？

延迟属性延迟的脚本在触发
DOMContentLoaded
之前执行。所以答案是肯定的。
我现在有很多困惑。1.SO上的许多帖子都建议jQueryDomReady与DOMContentLoaded相同（例如），但jQueryDomReady在CSSOM加载后激发。那么所有这些帖子在技术上都是错误的吗？2.在加载CSSOM之前是否执行延迟脚本标记（内联或外部）？正如我在下面与answer的用户讨论的那样，jquery ready和DOMContentLoaded似乎是相同的，因此原则上其他stackoverflow帖子，是正确的，但是他们应该提到，如果没有jquery，我们需要在
DOMContentLoaded
之后重新绘制浏览器。您的上一个链接没有提到CSSOM。
domready
使用
DOMContentLoaded
，因此从理论上讲，它们的行为方式相同。至于答案，在大多数情况下，延迟发生在页面加载之后，因此此时应加载CSSOM否如果此时加载CSSOM，则DOMContentLoaded必须在此之前触发。但是不能，因为DOMContentLoaded只有在执行延迟脚本之后才会启动。是的，延迟属性延迟的脚本是在（DOMContentLoaded）启动之前执行的。我更新了答案为什么
document.body.offsetTop导致重新绘制？因为此属性必须根据其offsetParent的位置返回元素的偏移位置，为此，它必须进行回流，以便每个人都有一个位置。我一直认为
DOMContentLoaded
与jQuery dom ready相同。网站上的许多帖子都提出了这一点。加载CSSOM后，
readystatechange
事件是否会触发？如果头部有一个大的css文件。当浏览器到达
document.body.offsetTop；//强制CSS重新绘制
若样式表尚未加载，浏览器会停止进一步的javascript处理吗？它会等待样式表被加载和应用，然后找到偏移量，然后开始进一步的javascript处理吗？@user31782，当DOMContentLoaded触发时，样式表被加载（当然，除非您在触发后动态附加它）。不会加载的是CSSOM，这意味着CSS内容不会被解析为与DOM相关的内容（如果我可以这么说的话）。所以来回答你的问题