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

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

为了

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

到元素并不是触发动画的原因，而更改属性会触发动画。

HTML：

<div id="fade1" >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;}

脚本：

//worksdocument.getElementById( 'fade1' ).className += ' fade-in';//doesn't workdocument.getElementById( 'fade2' ).className = 'fadeable';document.getElementById( 'fade2' ).className += ' fade-in';//worksdocument.getElementById( 'fade3' ).className = 'fadeable';window.setTimeout( function() {    document.getElementById( 'fade3' ).className += ' fade-in';}, 100);