0

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

我有一个 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>
4

1 回答 1

0

看起来在您调用时页面上可能不存在 DOM 元素expand_transition。您应该确保您的脚本在页面加载之前等待运行，可能会使用以下内容：

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

如果您已经这样做了，如果该expand_transition函数在页面加载时立即运行，那么浏览器可能正在合并您的 DOM 更改。这是大多数浏览器提供的功能，因此您可以一次进行多项更改，并且它们都在一次重绘中出现在页面上。

与其expand_transition直接调用，不如考虑尝试这样的事情（来自您的onload处理程序）：

setTimeout(expand_transition, 0);

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

于 2013-05-08T16:27:37.530 回答