为了
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" >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);
