javascript - 在 Javascript 中输入时 CSS Transition 不起作用

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:
首先，我在 html 中运行 inits(); 然后:

<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，不如考虑尝试这样的事情(从您的 onload 处理程序):

setTimeout(expand_transition, 0);

人为延迟足以让浏览器相信您希望它在执行过渡功能之前应用任何布局更改。