试图通过JavaScript将CSS3转换应用于幻灯片放映时，我感到非常头疼。
基本上，JavaScript获取幻灯片中的所有幻灯片，并将CSS类应用于正确的元素，以提供良好的动画效果，如果没有CSS3转换支持，它将只应用样式而不进行转换。
现在，我的"小"问题。所有工作都如预期，所有幻灯片都得到了正确的样式，代码运行没有错误(到目前为止(。但是指定的转换不起作用，即使应用了正确的样式。此外，当我自己通过检查器应用样式和转换时，样式和转换也会起作用。
既然我自己找不到一个合乎逻辑的解释，我想这里有人可以回答，好吗？
我举了一个小例子来说明现在的代码是什么：http://g2f.nl/38rvma或者使用JSfiddle(无图像(：http://jsfiddle.net/5RgGV/1/
要使transition工作，必须做三件事。
- 元素必须显式定义属性，在本例中为：
opacity: 0; - 元素必须定义转换：
transition: opacity 2s; - 必须设置新属性：
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>欺骗布局引擎！
function finalizeAndCleanUp (event) {
if (event.propertyName == 'opacity') {
this.style.opacity = '0'
this.removeEventListener('transitionend', finalizeAndCleanUp)
}
}
element.style.transition = 'opacity 1s'
element.style.opacity = '0'
element.addEventListener('transitionend', finalizeAndCleanUp)
// next line's important but there's no need to store the value
element.offsetHeight
element.style.opacity = '1'
如前所述，transition通过从状态A插值到状态B来工作。如果脚本在同一函数中进行更改，布局引擎将无法分离状态A结束和B开始的位置。除非你给它一个暗示。
由于没有官方的方式来进行提示，您必须依赖某些功能的副作用。在这种情况下，.offsetHeightgetter隐式地使布局引擎停止、评估和计算设置的所有属性，并返回一个值。通常，出于性能影响，应该避免这种情况，但在我们的案例中，这正是所需要的：状态整合。
为完整起见，添加了清理代码。
有些人问为什么会有延迟。该标准希望允许同时发生多个转换，称为样式更改事件(例如元素在旋转到视图中的同时逐渐消失(。不幸的是，它没有定义一种明确的方式来分组您希望同时发生的转换。相反，它允许浏览器根据调用转换的间隔任意选择同时发生的转换。大多数浏览器似乎都使用刷新率来定义这个时间。
如果您想要更多详细信息，以下是标准：http://dev.w3.org/csswg/css-transitions/#starting