Question

在Webkit上打开this fiddle将显示我正在谈论的内容。

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

应该可以通过这种方式完全指定单步动画（无需开始使用@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/

Answer 2

或者，您可以使用jQuery.animate（）

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

没有CSS，webkit和mozilla都可以使用。虽然这可能会失败我尝试使用CSS3的目的。

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

2 个答案: