javascript - JavaScript での入力時に CSS トランジションが機能しない

Question

私はすべてのスレッドを読み、考えられるすべての解決策を試しましたが、何が欠けているのかわかりません!

video_container_dcJavascript で呼び出すときにフェードインしたいdiv があります。

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;*/
}

ジャバスクリプト:

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>