Показать сообщение отдельно
  #1 (permalink)  
Старый 31.08.2014, 08:10
Новичок на форуме
Отправить личное сообщение для Alexander34 Посмотреть профиль Найти все сообщения от Alexander34
 
Регистрация: 31.08.2014
Сообщений: 3

Реализация DOM
Всем доброго дня!!! Пытаюсь глубже понять реализацию 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 дайте подсказку и рекомендации. Спасибо!
Ответить с цитированием