Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.08.2014, 09: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 дайте подсказку и рекомендации. Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 31.08.2014, 20:46
Интересующийся
Отправить личное сообщение для vvkk Посмотреть профиль Найти все сообщения от vvkk
 
Регистрация: 20.08.2014
Сообщений: 28

Возможно какое то время тратится на отрисовку созданого динамически элемента. Т.е по факту в дереве DOM он уже присутвует но не отрисован самим броузером.Когда броузер его отобразит произойдет смещение по времени и мы увидим почти мгновенное отображение, но на самом деле плавное.Javascript да однопоточен, но когда он выполнит инструкцию document.body.appendChild(d); это не значит что отобразит его, а перейдет к следующей d.style.opacity = 1; И пройзойдет смещение. Скорее всего это можно отнести к багу.
Ответить с цитированием
  #3 (permalink)  
Старый 31.08.2014, 22:53
Аватар для ixth
Профессор
Отправить личное сообщение для ixth Посмотреть профиль Найти все сообщения от ixth
 
Регистрация: 19.01.2010
Сообщений: 354

Да, действительно похоже на баг. Я тебе больше скажу, посмотри на мой вариант:

<button id="btn">smooth</button><br/>
<div></div>
<div id="d"></div>
<style>
div {
	display:inline-block;
	width: 100px; height: 100px;
	background-color: red;
	opacity: 1;
	transition-property: all;
	transition-duration: 1000ms;
}

#d {
	background-color: blue;
	opacity: 0;
}
</style>

<script>
var div = document.getElementsByTagName("div")[0];
var d = document.getElementById("d");
d.parentNode.removeChild(d);

document.getElementById("btn").onclick = function () {
 	div.style.opacity = 0;
 	setTimeout(function(){ 
 		document.body.appendChild(d);
*!*
 		console.log(d.offsetTop);
*/!*
 		d.style.opacity = 1;
 	}, 1000);
};
</script>


Видимо, это как-то связано с оптимизацией обращений к DOM. Есть там какая-то хитрота, не помню точно, отпишу, если найду.
Ответить с цитированием
  #4 (permalink)  
Старый 02.09.2014, 08:09
Новичок на форуме
Отправить личное сообщение для Alexander34 Посмотреть профиль Найти все сообщения от Alexander34
 
Регистрация: 31.08.2014
Сообщений: 3

Спасибо! Буду дальше разбираться, буду ждать новых сообщений.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
новый элемент не добавляется в DOM kuchuluk Элементы интерфейса 5 30.05.2014 22:11
инициализация плагинов до вставки html-я в DOM FanAizu jQuery 3 19.01.2014 00:16
Книги по Ajax BaVa Учебные материалы 18 18.08.2013 14:05
Новый элемент отсутствует в DOM модели StrSprut jQuery 4 19.09.2011 12:50
Как в браузерах реализуются функции DOM (например createElement) iamme Общие вопросы Javascript 7 02.09.2011 20:26