Всем доброго дня!!! Пытаюсь глубже понять реализацию DOM в браузерах и недавно наткнулся на такой случай. Есть обычная страница:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>анимация переходы</title>
<style>
div {
width: 300px;
height: 300px;
background-color: red;
opacity: 1;
transition-property: all;
transition-duration: 1s;
}
#d {
width: 300px;
height: 300px;
background-color: blue;
opacity: 0;
transition-property: all;
transition-duration: 1s;
}
</style>
</head>
<body>
<button id="btn">click</button>
<div></div>
<div id="d"></div>
<script>
var div = document.getElementsByTagName("div")[0];
var d = document.getElementById("d");
document.body.removeChild(d);
var button = document.getElementById("btn");
</script>
</body>
</html>
В стиле описан переход transition, элемент <div id="d"> сразу же удаляю из DOM(можно просто создать его и хранить в переменной). Если кликнуть по кнопке, то js изменить opacity элемента и мы видим плавный переход. Вот 2 реализации в js
1)
var div = document.getElementsByTagName("div")[0];
var d = document.getElementById("d");
document.body.removeChild(d);
var button = document.getElementById("btn");
button.onclick = function() {
div.style.opacity = 0;
setTimeout(function(){
document.body.appendChild(d);
d.style.opacity = 1;
},1000);
}
В данной реализации, появление второго div-а , происходит резко(без перехода). Но если добавить таймаут, то переход будет плавный.
2)
var div = document.getElementsByTagName("div")[0];
var d = document.getElementById("d");
document.body.removeChild(d);
var button = document.getElementById("btn");
button.onclick = function() {
div.style.opacity = 0;
setTimeout(function(){
document.body.appendChild(d);
setTimeout(function() {
d.style.opacity = 1;
},100);
},1000);
}
С чем это связано? Данная проблема возникает, если вставить в DOM элемент, а затем изменить style. Если же элемент есть в DOM, то все работает плавно. Проверено в IE11, chrome ff последних версий. Мастера js дайте подсказку и рекомендации. Спасибо!