Непрозрачность выцветанию работает только тогда, когда defered

Question

Я хотел бы сделать DIV появляется с эффектом постепенного изменения:

<div id="toto" style="background:red;width:200px;height:200px"></div> 

Самый простой способ я знаю, с свойствами CSS «переход» и «непрозрачности». На мой взгляд, этот код должен работает (но это не делает):

document.getElementById("toto").style.opacity = 0; 
document.getElementById("toto").style.transition = "all 5s ease"; 
document.getElementById("toto").style.opacity = 1; 

(см по адресу: http://jsfiddle.net/87q44ysg/1/#share)

Кто-нибудь знает, почему ?? Я нашел этот хак, но я не могу объяснить, почему это работает только в этом случае ...:

document.getElementById("toto").style.opacity = 0; 
window.setTimeout(function(){ 
    document.getElementById("toto").style.transition = "all 5s ease"; 
    document.getElementById("toto").style.opacity = 1; 
}, 1); 

(см по адресу: http://jsfiddle.net/36009t1x/#share)

Спасибо!

Answer 1

Первый случай

document.getElementById("toto").style.opacity = 0; 
document.getElementById("toto").style.transition = "all 5s ease"; 
document.getElementById("toto").style.opacity = 1; 

Это происходит потому, что каждая строка выше JavaScript вызывается сразу, и это похоже на установку этих правил CSS:

#toto { 
    opacity: 0; 
    transition: all 5s ease; 
    opacity: 1; 
} 

, как вы можете увидеть второй вхождение непрозрачности будет переопределять значение 0, поэтому в результате это будет 1.

#toto { 
    transition: all 5s ease; 
    opacity: 1; 
} 

В этом случае анимации нет, только статическая непрозрачность, которая не изменится.

Второго случай

document.getElementById("toto").style.opacity = 0; 
window.setTimeout(function(){ 
    document.getElementById("toto").style.transition = "all 5s ease"; 
    document.getElementById("toto").style.opacity = 1; 
}, 1); 

В этом случае сначала установите непрозрачность до 0. А после 1мса изменить правила CSS, так что изменение непрозрачности от 0 до 1. Поэтому анимация была запущена.

С уважением.

Answer 2

Вам следует избегать установки стилей в простой Javascript и переместить это в CSS. Что касается вашего вопроса, он не стандартизирован, и каждый браузер может делать все, что думает разработчик, правильно. Вероятно, свойство transition на самом деле не применяется до тех пор, пока не перепланируется или что-то в этом роде. См. Этот вопрос для более детального тестирования: Clean way to programmatically use CSS transitions from JS?

Answer 3

Это прекрасно работает, это помогает?

setTimeout(function() {document.getElementById("toto").style.opacity = "1";},500);

#toto { 
 
    transition: opacity 5s; 
 
    opacity: 0; 
 
}

<div id="toto" style="background:red;height:200px"></div>

Answer 4

Вы должны играть с тайм-аутов в этом.

Попробуйте это: DEMO

Play со значениями, если вы хотите, чтобы достичь желаемого эффекта.

Вы можете добиться того же результата с помощью setInterval, но я предпочитаю setTimeout в этом.

/*Fades in an element. Params: A DOM Element*/ 
    var fade = function (node) { 
    var level = 0; 
    var step = function () { 
     node.style.opacity = level; 
     if (level < 1) { 
     level += 0.1; 
     setTimeout(step, 50); //increase the value by 0.1 every 50ms 
     } 
    }; 
    setTimeout(step, 0); //calls immidiatelly (4ms after) 
    }; 
    fade(document.body); 

Cheers!