Показать сообщение отдельно
  #1 (permalink)  
Старый 23.06.2013, 13:38
Аватар для Magneto
Люмус, Емаксос Developer!
Отправить личное сообщение для Magneto Посмотреть профиль Найти все сообщения от Magneto
 
Регистрация: 06.05.2010
Сообщений: 677

CSS3 анимация (transition)
Я хочу добавить в приложение немного анимации, анимацию решил реализовывать при помощи css3. И у меня возникли проблемы с этим.

Сначала я опишу алгоритм работы анимации:
Есть некая кнопка по которой при клике плавно выезжает менюшка. При этом менюшка динамическая, она каждый раз заново генерируется и вставляется в DOM

Вот простой код, который по логике уже должен работать:
<html>
<head>
	<style type="text/css">
		.menu {
			width: 0px;
			height: 20px;
			text-align: center;
			color: #fff;
			background-color: green;
		}

		.animate {
			width: 400px;
			transition: width 2s;
		}
	</style>
</head>
<body>
	<script type="text/javascript">

		div = document.createElement('div');
		div.innerHTML = 'Dynamic Menu'
		div.className = 'menu';

		document.body.appendChild( div );

		div.className += ' animate';

	</script>
</body>
</html>

, но если запустить код то никакой анимации не произойдет, хотя она и прописана в стилях - transition: width 2s;

Проблема в том что современные браузеры оптимизируют работу с DOM, и они стараются произвести максимум работы с элементом перед вставкой его в DOM. Поэтому если посмотреть в код на строки 25 и 27 становится ясно что они выполняются не в той последовательности как записаны. Тоесть браузер сначала добавляет класс animate в котором описана анимация а после вставляет элемент в страницу и естественно никакой анимации не происходит.

Чтоб проверить это нужно вынести добавление класса animate в асинхронную функцию, например вот так:
setTimeout( function () {
	div.className += ' animate';
}, 10 );

<html>
<head>
	<style type="text/css">
		.menu {
			width: 0px;
			height: 20px;
			text-align: center;
			color: #fff;
			background-color: green;
		}

		.animate {
			width: 400px;
			transition: width 2s;
		}
	</style>
</head>
<body>
	<script type="text/javascript">

		div = document.createElement('div');
		div.innerHTML = 'Dynamic Menu'
		div.className = 'menu';

		document.body.appendChild( div );

		setTimeout( function () {
			div.className += ' animate';
		}, 10 );

	</script>
</body>
</html>

, ну вот все работает.

Но так как предполагается достаточно много анимированных элементов, то совсем не хочется иметь великое множество setTimeout в проекте.

Ну и вопрос: как установить класс новосозданному элементу, гарантированно после вставки этого элемента в DOM? ( Не используя setTimeout, setInterval и пр. )
Ответить с цитированием