用Javascript输入时CSS过渡不起作用

Question

我阅读了每个线程并尝试了所有可能的解决方案，但不知道自己缺少什么！

我有一个div video_container_dc ，当我用Javascript调用时，我想淡入。

CSS：

#video_container_dc {
    position: absolute;
    width: 350px;
    height: 198px;
    top: 0px;
    left: 376px;
    opacity: 0;
    /*visibility:hidden;*/
    /*display:none;*/
}
#video_container_dc.expandingVid {
    -webkit-transition: all 2s ease-out 1s;
    -moz-transition: all 2s ease-out 1s;
    -o-transition: all 2s ease-out 1s;
    -ms-transition: all 2s ease-out 1s;
    transition: all 2s ease-out 1s;
    opacity:1;
    /*visibility:visible;*/
    /*display:block;*/
}

JAVASCRIPT：

var expand_content;
var vidContainer;
var expandTweens = [];

function expand_transition() {
    expandTweens = [];
    expand_content.className = 'expanding';
    vidContainer.className = 'expandingVid';
}

inits = function () {
    expand_content = document.getElementById('expand_content_dc');
    vidContainer = document.getElementById('video_container_dc');
}

我尝试了所有这些补间功能都无济于事：

//vidContainer = document.getElementById('video_container_dc');
//document.getElementById( 'video_container_dc' ).className += 'expandingVid';
//vidContainer.className += "expandingVid"; 
//vidContainer.css("opacity", 0);
//vidContainer.offset();
//vidContainer.css("transition", "opacity 1000ms ease-out").css("opacity", 1);

HTML：
首先，我运行inits(); 然后在html中：

<div id="video_container_dc">
    <video id="video_dc" >
        <source id="video_1_mp4_src_dc" type="video/mp4"/>
    </video>
</div>

Answer 1

在调用expand_transition时，页面上似乎不存在DOM元素。 您应该确保脚本等待运行，直到页面被加载为止，并可能使用类似以下的方法：

window.addEventListener('load', function() {
    // your code here
}, false);

如果您已经在执行此操作，并且expand_transition函数在页面加载后立即运行，则浏览器可能正在合并DOM更改。 这是大多数浏览器提供的功能，因此您可以一次进行许多更改，并且所有更改都可以在页面上显示一次重新绘制。

与其直接调用expand_transition ， expand_transition考虑尝试类似的操作（从onload处理程序中）：

setTimeout(expand_transition, 0);

人为延迟足以使浏览器确信您希望浏览器在执行过渡功能之前应用所有布局更改。