Добрый день.
Схема такая:
- "аппендю" элемент родителю;
- навешиваю класс родителю с анимацией для ребёнка.
Вот песочница: http://jsfiddle.net/fk1b1swx/1/
Почему css transition
не срабатывает, если сделаю так:
$('.parent').append('<div class="child"></div>');
$('.parent').addClass('go');
Но сработает, если сделать таким образом:
$('.parent').append('<div class="child"></div>');
setTimeout(function(){ $('.parent').addClass('go'); },1);
?
И в тоже время, опять, не сработает так:
$('.parent').append('<div class="child"></div>');
(function(){ $('.parent').addClass('go'); })();
Почему так получается, ведь JS синхронный, т.е. сначала элемент физически "встроится" в DOM, а потом "отстилизуется", и как это решить? Не считаю setTimeout
хорошим решением, но .done();
и .complete(); так же не дал результатов. Объясните, как это работает?
You can also detect when an animation ends: $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
Спасибо.