什么时候CSS转换被触发？

我想淡入一页。它应该尽快淡入，即不要等待图像加载。什么时候CSS转换被触发？

我有

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

我有CSS像

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

，略高于</body>一个html页面我有

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

但感觉像很长一段时间加载如果一个页面有很多图像。我认为这是应该尽快将DOM写入浏览器？

我尝试删除文档准备，但它是一样的。所以我想知道，什么时候CSS转换被触发？它晚于文档准备好吗？

我要去的效果是页面褪色。

2014-01-16 ed209

您是否在执行jQuery的正文的末尾尝试了脚本？ – Seano666

这是一个很好的问题！这将需要一些测试..非常好奇，看到这个答案和答案！ – MElliott

这是一个相关的问题http://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load可能有助于回答。 – archie

如何使用动画功能，而不是像这样的CSS？

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

2014-01-16 04:44:16

根据this过渡开始时有些style changed event叫（我看到它是一个浏览器特定的东西）。问题是，我们不能肯定它是DOM之前称为满载：

因为当样式变化事件发生此规范没有定义，因此什么样的变化来计算的值被认为是同时，作者应该知道，在做出可能转换的更改之后的一小段时间内更改任何转换属性可能会导致在实现之间变化的行为，因为这些更改可能会在某些实现中被认为是同时发生的，但其他实现不会发生。

我不认为这个事件会在DOM加载之前提出。

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

2014-01-16 05:25:00 Tony

回答