什么时候触发 CSS 过渡？答案

【问题标题】：When are CSS transitions fired?什么时候触发 CSS 过渡？
【发布时间】：2014-02-04 20:40:52
【问题描述】：

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

我有一个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 转换？是否晚于文件准备好？

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

【问题讨论】：

【解决方案1】：

像这样使用 animate 函数而不是 css 怎么样？

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：