为什么创建后立即执行的样式分配不是动画的？

Question

在Webkit上打开这个小提琴将展示我正在谈论的内容.

如何在首次指定元素时指定元素的样式,然后指定它的最终状态？

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

Answer 1

似乎与此处描述的问题相同：CSS3 转换为动态创建的元素

所以

$("#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/