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

小编典典

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

css

尝试将CSS3转换应用于幻灯片显示槽JavaScript时，我有些头疼。

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

现在，我的“小”问题。所有工作都按预期进行，所有幻灯片都具有正确的样式，代码运行时没有错误（到目前为止）。但是，即使应用了正确的样式，指定的过渡也不起作用。另外，当我自己通过检查员应用样式和过渡时，它们也可以工作。

由于我自己找不到逻辑上的解释，所以我以为这里有人可以回答，请问？

阅读 402

2020-05-16

共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到元素并不是触发动画的原因，而更改属性会触发动画。

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

2020-05-16