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

Question

在 Webkit 上打开这个小提琴将显示我在说什么。

如何在第一次指定元素时指定元素的样式，然后再指定它的最终状态？

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

Answer 1

似乎与此处描述的问题相同：CSS3 transitions to dynamic 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/

Answer 2

或者，您可以使用 jQuery.animate()

word.animate({height: 100, opacity: 1}, 5000);

可以在没有 CSS 的情况下工作，也可以在 webkit 和 mozilla 上工作。尽管我猜这违背了尝试使用 CSS3 的目的。