Чтобы заставить transition работать, должны произойти три вещи.
- элемент должен иметь явно определенное свойство, в этом случае:
opacity: 0; - элемент должен иметь определенный переход:
transition: opacity 2s; - новое свойство должно быть установлено:
opacity: 1
Если вы назначаете 1 и 2 динамически, как в вашем примере, должна быть задержка до 3, чтобы браузер мог обработать запрос.Причина, по которой он работает при отладке, заключается в том, что вы создаете эту задержку, шагая через нее, давая браузеру время на обработку.Задержите присвоение .target-fadein:
window.setTimeout( function() { slides[targetIndex].className += " target-fadein"; }, 100 );
или вставьте .target-fadein-begin непосредственно в ваш HTML, чтобы он анализировался при загрузке и был готов к переходу.
Добавление transitionэлемент не запускает анимацию, а изменение свойства.
Демо: http://jsfiddle.net/ThinkingStiff/QNnnQ/
HTML:
<div id="fade1" class="fadeable">fade 1 - works</div>
<div id="fade2">fade 2 - doesn't work</div>
<div id="fade3">fade 3 - works</div>
CSS:
.fadeable {
opacity: 0;
}
.fade-in {
opacity: 1;
transition: opacity 2s;
-moz-transition: opacity 2s;
-ms-transition: opacity 2s;
-o-transition: opacity 2s;
-webkit-transition: opacity 2s;
}
Сценарий:
//works
document.getElementById( 'fade1' ).className += ' fade-in';
//doesn't work
document.getElementById( 'fade2' ).className = 'fadeable';
document.getElementById( 'fade2' ).className += ' fade-in';
//works
document.getElementById( 'fade3' ).className = 'fadeable';
window.setTimeout( function() {
document.getElementById( 'fade3' ).className += ' fade-in';
}, 100);