CSS转换何时被触发？

Question

我想淡入一页。它应该尽快淡入，即不要等待图片加载。

我有一个带

的html页面

<div class="content">
   text, images
</div>

我喜欢

.content{
    opacity:0;
    transition: opacity 0.3s ease-in-out;
}

就在</body>我的

之上

$( document ).ready(function() {
    $(".content").css("opacity",1);
});

但是如果页面有很多图像，感觉就像是长时间加载。我认为这应该在DOM写入浏览器后立即触发？

我尝试删除文档，但它是一样的。所以我想知道，何时触发了CSS转换？它是否比文件准备好了？

我想要的效果是页面淡出。

Answer 1

如何使用animate函数而不是像这样的css？

$( document ).ready(function() {
    $(".content").delay(1).animate({opacity:1});
});

Answer 2

根据this转换开始时调用了一些style changed event（因为我看到它是浏览器特定的东西）。问题是我们不能确定在DOM完全加载之前调用它：

  

由于此规范未定义样式更改事件   发生，因此考虑计算值的变化   同时，作者应该意识到改变任何一个   转换属性在进行更改后的少量时间   可能转换可能会导致行为不同   实现，因为可能会同时考虑更改   一些实现，但不是其他实现。

我认为在加载DOM之前不会引发此事件。

对此我认为如果在加载DOM之前需要转换，那么最好使用jQuery将元素设置为C-link suggested。如果在使用此问题后可以开始转换：Using CSS for fade-in effect on page load