为什么我的 JavaScript 指定的 CSS 转换不起作用？

JavaScript 指定的 CSS 过渡不起作用

通过 JavaScript 将 CSS3 过渡应用到幻灯片时，您可能会遇到一个令人费解的问题，其中指定尽管应用了正确的样式，但过渡仍无法正常工作。出现这种差异的原因是 CSS 转换仅在指定属性更改值时触发，而不是在最初定义转换时触发。

要解决此问题，请确保满足以下三个条件：

1. 属性显式定义：受影响的元素必须在其初始样式中显式声明属性。
2. 过渡定义：元素必须定义所需的过渡，如“transition: opacity 2s;”。
3. 属性值更改：定义transition后，设置新的属性值，触发动画。

在您的示例中，过渡不起作用，因为属性值更改（设置“opacity：1”）发生在浏览器有机会处理动态分配的过渡之前。要解决此问题，请在分配“target-fadein”类之前引入延迟：

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

或者，直接在 HTML 中包含“target-fadein-begin”类，允许在加载时对其进行解析并准备好过渡。

请记住，过渡本身的 JavaScript 分配不会启动动画；正是属性值的变化触发了过渡效果。

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