javascript - 通过 JavaScript 分配时，CSS 转换不起作用

Question

在尝试通过 JavaScript 将 CSS3 转换应用于幻灯片放映时，我感到非常头疼。

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

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

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

我整理了一个代码示例:http://g2f.nl/38rvma 或者使用 JSfiddle(无图像):http://jsfiddle.net/5RgGV/1/

Answer 1

要使 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); 

或者将 .target-fadein-begin 直接放入您的 HTML 中，以便在加载时对其进行解析并为转换做好准备。

向元素添加 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>