什么时候触发 CSS 过渡？

Posted 2023-03-06

【中文标题】什么时候触发 CSS 过渡？

【英文标题】：When are CSS transitions fired?

【发布时间】：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 转换？是否晚于文件准备好？

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

【问题讨论】：

您是否尝试过在正文末尾执行 jquery 的脚本？

这是个好问题！这将需要一些测试。非常想看到对此的回应和答案！

这是一个相关问题***.com/questions/11679567/…，可能有助于回答。

【参考方案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