为什么我的 CSS 转换在通过 JavaScript 应用时不起作用？

通过 JavaScript 分配时未应用 CSS 转换

尽管使用 JavaScript 应用 CSS3 转换，但它们无法按预期工作。当动态分配包含过渡属性的 CSS 类时，会出现此问题。

要有效触发过渡，先决条件是：

• 属性的显式定义（例如，不透明度：0；）
• 定义的过渡（例如，transition: opacity 2s;）
• 设置新属性（例如，opacity: 1;）

在 JavaScript 中，问题源于浏览器的处理时间。必须首先应用正确的样式，然后稍微延迟一下，然后再设置负责转换的 CSS 类。此延迟允许浏览器在应用过渡之前注册应用的样式。

要实现此延迟，请使用 window.setTimeout() 推迟添加包含过渡的 CSS 类：

<code class="js">window.setTimeout(function() {
  slides[targetIndex].className += " target-fadein";
}, 100);</code>

或者，在加载时在 HTML 中包含一个转换触发类 (target-fadein-begin)：

<code class="html"><div class="fadeable target-fadein-begin"></div></code>

通过满足这些条件，通过 JavaScript 触发的 CSS 转换可以按预期运行，从而允许无缝动画。

以上是为什么我的 CSS 转换在通过 JavaScript 应用时不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！