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

人工延迟足以说服浏览器在执行转换功能之前要求它应用任何布局更改。

在Javascript中输入时，CSS Transition无法正常工作

1 个答案: