CSS转换在通过JavaScript分配时不起作用

我在试图通过JavaScript将CSS3转换应用到幻灯片中时遇到了一些麻烦

基本上，JavaScript获取幻灯片放映中的所有幻灯片，并将CSS类应用于正确的元素以提供良好的动画效果，如果没有CSS3转换支持，它将只应用样式而不进行转换

现在，我的“小”问题。所有工作如预期，所有幻灯片获得正确的样式，代码运行没有bug（到目前为止）。但是指定的转换不起作用，即使应用了正确的样式。此外，当我通过检查器自己应用样式和转换时，它们也会起作用

因为我自己找不到一个合乎逻辑的解释，所以我想这里有人可以回答，拜托

我总结了一个小示例，说明了现在的代码是什么：

---

或者使用JSfiddle（无图像）：

要使

转换

工作，必须发生三件事

元素必须显式定义属性，在本例中：

opacity:0

元素必须定义转换：

transition:opacity

必须设置新属性：

opacity:1

如果动态分配1和2，就像在示例中一样，在3之前需要有一个延迟，以便浏览器可以处理请求。它在调试时工作的原因是，您通过单步执行它来创建延迟，从而给浏览器处理时间。延迟分配

。目标fadein

：

window.setTimeout(function() {
  slides[targetIndex].className += " target-fadein";
}, 100); 

或者直接将

.target fadein begin

放入HTML中，以便在加载时对其进行解析，并为转换做好准备

向元素添加

transition

不会触发动画，而更改属性会触发动画

//有效
document.getElementById（'fade1'）。className+=“淡入”
//不起作用
document.getElementById（'fade2'）。className='Fadable'
document.getElementById（'fade2'）。className+=“淡入”
//工作
document.getElementById（'fade3'）。className='Fadable'
setTimeout（函数（）{
document.getElementById（'fade3'）。className+=“淡入”
}，50）

.fadable{
不透明度：0；
}
.淡入{
不透明度：1；
过渡：不透明度2s；
}

fade 1-有效
褪色2-不起作用
fade 3-工作

要使过渡工作，必须发生三件事

元素必须显式定义属性，在本例中：

opacity:0

元素必须定义转换：

transition:opacity

必须设置新属性：

opacity:1

如果动态分配1和2，就像在示例中一样，在3之前需要有一个延迟，以便浏览器可以处理请求。它在调试时工作的原因是，您通过单步执行它来创建延迟，从而给浏览器处理时间。延迟分配

。目标fadein

：

window.setTimeout(function() {
  slides[targetIndex].className += " target-fadein";
}, 100); 

或者直接将

.target fadein begin

放入HTML中，以便在加载时对其进行解析，并为转换做好准备

向元素添加

transition

不会触发动画，而更改属性会触发动画

//有效
document.getElementById（'fade1'）。className+=“淡入”
//不起作用
document.getElementById（'fade2'）。className='Fadable'
document.getElementById（'fade2'）。className+=“淡入”
//工作
document.getElementById（'fade3'）。className='Fadable'
setTimeout（函数（）{
document.getElementById（'fade3'）。className+=“淡入”
}，50）

.fadable{
不透明度：0；
}
.淡入{
不透明度：1；
过渡：不透明度2s；
}

fade 1-有效
褪色2-不起作用
fade 3-works

有些人问过为什么会有延迟。该标准希望允许多次转换（称为样式更改事件）同时发生（例如，元素在旋转到视图中的同时淡入）。不幸的是，它没有定义一种明确的方式来分组您希望同时发生的转换。取而代之的是，它允许浏览器根据调用的间隔任意选择同时发生的转换。大多数浏览器似乎都使用它们的刷新率来定义这个时间

如果您需要更多详细信息，请参阅以下标准：

---

有些人问为什么会有延误。该标准希望允许多次转换（称为样式更改事件）同时发生（例如，元素在旋转到视图中的同时淡入）。不幸的是，它没有定义一种明确的方式来分组您希望同时发生的转换。取而代之的是，它允许浏览器根据调用的间隔任意选择同时发生的转换。大多数浏览器似乎都使用它们的刷新率来定义这个时间

如果您需要更多详细信息，请参阅以下标准：

---

欺骗布局引擎

函数finalizeAndCleanUp（事件）{
如果（event.propertyName=='opacity'）{
this.style.opacity='0'
this.removeEventListener（'transitionend'，finalizeAndCleanUp）
}
}
element.style.transition='opacity 1s'
element.style.opacity='0'
元素。addEventListener（'transitionend'，finalizeAndCleanUp）
//下一行很重要，但不需要存储值
元素。远视
element.style.opacity='1'

如前所述，

transition

s通过从状态A插值到状态B来工作。如果脚本在同一函数中进行更改，布局引擎将无法分离状态A结束和B开始的位置。除非你给它一个暗示

由于没有官方的方法来暗示，你必须依靠一些功能的副作用。在本例中，

.offsetHeight

getter隐式生成布局