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

Question

在通过JavaScript将CSS3过渡应用到幻灯片放映时，我感到非常头疼。

基本上，JavaScript获取幻灯片中的所有幻灯片，并将CSS类应用于正确的元素以获得良好的动画效果，如果没有CSS3过渡支持，它将只应用样式而不应用过渡。

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

既然我自己找不到一个合理的解释，我想这里有人可以回答这个问题，好吗？

我提供了一个小示例来说明现在的代码是什么：http://g2f.nl/38rvma或使用JSfiddle (无图像)：http://jsfiddle.net/5RgGV/1/

Answer 1

要使transition正常工作，必须完成三件事。

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

• the

• 必须定义转换:必须设置新属性：opacity: 1

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

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

或者直接将.target-fadein-begin放入你的超文本标记语言中，这样它就会在加载时被解析，并为转换做好准备。

将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>

​

Answer 2

欺骗布局引擎！

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开始的位置分开。除非你给它一个提示。

由于没有正式的方式来提供提示，您必须依赖于某些函数的副作用。在这种情况下，.offsetHeight getter隐式地使布局引擎停止，评估和计算所有设置的属性，并返回一个值。通常，出于性能考虑，应该避免这样做，但在我们的例子中，这正是我们所需要的:状态整合。

添加清理代码以确保完整性。

Answer 3

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

如果您需要更多详细信息，请参考以下标准：http://dev.w3.org/csswg/css-transitions/#starting