Куда девается css transition?

Рейтинг: 0Ответов: 1Опубликовано: 02.01.2015

Добрый день.

Схема такая:

  • "аппендю" элемент родителю;
  • навешиваю класс родителю с анимацией для ребёнка.

Вот песочница: 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(); так же не дал результатов. Объясните, как это работает?

javascript jquery css-animation transition
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Можно грузить анимацию после загрузки html и исполняемого синхронно js, для этого нужно использовать функцию load():

$(document).ready(function() {
    $('.parent').append('<div class="child"></div>');
});
$(window).load(function() {
    $('.parent').addClass('go');
});

Пример

UPD. Промониторил вопрос, если я правильно понял, то физически элемент в доме, но браузер не понимает его физического положения из свойства указанного в css, поэтому и не срабатывает transition, чтобы он сработал нужно заставить браузер прочитать это свойство.

Нагуглено отсюда