CSS转换何时被触发？

Question

我想淡入一页.它应该尽快淡入,即不等待图像加载.

我有一个HTML页面

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

我有css喜欢

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