通过 JavaScript 分配时 CSS 过渡不起作用

我在尝试通过 JavaScript 将 CSS3 转换应用到幻灯片时遇到了一些令人头疼的问题。

基本上，JavaScript 会获取幻灯片中的所有幻灯片，并将 CSS 类应用到正确的元素以提供漂亮的动画效果，如果没有 CSS3 过渡支持，它将仅应用样式而无需过渡。

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

由于我自己找不到合乎逻辑的解释，我想这里有人可以回答，好吗？

我整理了一个现在代码的小例子：http://g2f.nl/38rvma或者使用 JSfiddle（无图像）：http://jsfiddle.net/5RgGV/1/

To make transition工作中，必须发生三件事。

1. 该元素必须具有显式定义的属性，在本例中：opacity: 0;
2. 该元素必须定义转换：transition: opacity 2s;
3. 必须设置新属性：opacity: 1

如果您动态分配 1 和 2（如示例中所示），则需要在 3 之前有一个延迟，以便浏览器可以处理请求。当您调试它时它起作用的原因是您通过逐步执行它来创建这种延迟，从而给浏览器时间来处理。延迟分配.target-fadein:

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

Or put .target-fadein-begin直接添加到 HTML 中，以便在加载时对其进行解析并为转换做好准备。

Adding transition更改元素并不是触发动画的原因，而是更改属性。

// Works
document.getElementById('fade1').className += ' fade-in'

// Doesn't work
document.getElementById('fade2').className = 'fadeable'
document.getElementById('fade2').className += ' fade-in'

// Works
document.getElementById('fade3').className = 'fadeable'

window.setTimeout(function() {
  document.getElementById('fade3').className += ' fade-in'
}, 50)

.fadeable {
  opacity: 0;
}

.fade-in {
  opacity: 1;
  transition: opacity 2s;
}

<div id="fade1" class="fadeable">fade 1 - works</div>
<div id="fade2">fade 2 - doesn't work</div>
<div id="fade3">fade 3 - works</div>