CSS Переход не работает при вводе в Javascript

Я прочитал каждую тему и пробовал все возможные решения и не знаю, чего я пропустил!CSS Переход не работает при вводе в Javascript

У меня есть 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>

источник

2013-05-08 user2163224

Правильно ли применяется класс? Он отображается на странице? – isherwood

Если вы закомментируете свойства, то они не будут применяться, это фактический код, который вы используете? – robertc

inits следует вызывать после html. Поскольку элементы не известны до разбора. вызывается в конце html. – ram2013

Похоже, что элементы DOM не существуют на странице во время звонка expand_transition. Вы должны убедиться, что ваш сценарий ждет, чтобы работать, пока не будет загружена страница, потенциально использовать что-то вроде:

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

Если вы уже делаете это, если функция expand_transition запускается сразу после загрузки страницы, то браузер, вероятно, объединяя ваши изменения DOM. Это функция, предоставляемая большинством браузеров, так что вы можете сделать сразу несколько изменений, и все они появляются на странице в одной перерисовке.

Вместо вызова expand_transition непосредственно, пытаясь рассмотреть что-то вроде этого вместо (от вашего onload обработчика):

setTimeout(expand_transition, 0);

Искусственная задержка будет достаточно, чтобы убедить браузер, что вы хотите, чтобы применить изменения макета до того выполнение вашей функции перехода.

источник

2013-05-08 16:27:37

CSS Переход не работает при вводе в Javascript

ответ

Смежные вопросы