javascript - 为什么样式分配在创建后立即执行而不是动画？

Question

开幕this fiddle在 Webkit 上将显示我在说什么。

如何在首次指定元素时指定其样式，然后指定其最终状态？

应该可以通过这种方式完全指定一个单步动画(无需开始使用@keyframes)，但似乎在这一点上我必须处理很多特定于实现的奇怪问题。请注意在 Firefox 中如何不执行动画...

Answer 1

似乎与此处描述的问题相同:CSS3 transitions to dynamically created elements

所以

$("#one").on('click',function(){
    var word = $("<div style='opacity: 0; height:0'>word</div>");
    $('body').prepend(word); 
    window.getComputedStyle(word[0]).getPropertyValue("top");
    word.css({height: 100, opacity: 1});
});

在这种情况下也适用:http://jsfiddle.net/wWnnH/3/