Запуск CSS3 перехода с добавлением класса с помощью Jquery

Question

В данный момент у меня есть работающая скрипка, которую я пытаюсь заставить переключиться с прозрачности css3, когда добавляю в нее класс. Основная настройка заключается в том, что я нажимаю кнопку, а затем с помощью jquery добавляю div в dom, а после добавления этого элемента в dom я добавляю в него класс. Предполагается, что добавление класса к этому новому элементу dom положит начало моему переходу, но это не так, единственное, что происходит, - это то, что элемент показывается, но переход непрозрачности не работает. Любая помощь будет высоко ценится, я оставляю ссылку на скрипку здесь fiddle link . И да, я знаю, что могу сделать постепенное увеличение с помощью только jquery, но это всего лишь эксперимент, который, вероятно, будет использоваться для запуска другого перехода CSS, кроме непрозрачности

Answer 1

Я сталкивался с этой проблемой раньше, единственный найденный мной обходной путь - это добавление setTimeout, чтобы DOM заметил, что появился новый элемент. Это может быть ноль мс, и это все еще будет работать:

$('button').live('click', function() {
    $(this).after("<div class='fade'>This is just a test</div>")
    setTimeout(function(){$(".fade").addClass("in");}, 0)
});

http://jsfiddle.net/tfmFx/

Answer 2

Я не думаю, что переходы CSS3 поддерживаются для динамически создаваемых элементов.Я попытался изменить ваш образец, поместив div непосредственно в HTML, и переходы работали нормально.Возможно, вам придется обходиться этим до тех пор, пока не улучшится поддержка браузера.