通过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到元素不是触发动画的内容,而是更改属性.

演示:http://jsfiddle.net/ThinkingStiff/QNnnQ/

HTML:

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

CSS:

.fadeable {
    opacity: 0;
}

.fade-in {
    opacity: 1;
    transition:             opacity 2s;
        -moz-transition:    opacity 2s;
        -ms-transition:     opacity 2s;
        -o-transition:      opacity 2s;
        -webkit-transition: opacity 2s;
}

脚本:

//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';

}, 100);

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'

如前所述，transitions通过从状态A插值到状态B进行工作。如果您的脚本在同一功能中进行了更改，则布局引擎无法在状态A结束和B开始的位置分开。除非您给出提示。

由于没有正式的方法可以提供提示，因此您必须依靠某些功能的副作用。在这种情况下，.offsetHeightgetter隐式使布局引擎停止，评估和计算所设置的所有属性，并返回一个值。通常，应该避免这种情况对性能的影响，但是在我们的情况下，这正是需要的：状态合并。

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