为什么创建后立即执行的样式分配没有动画效果？

Question

打开这个fiddle在Webkit上会显示我所说的内容。

当我第一次指定元素的样式，然后是它的最终状态时，我该如何指定它的样式？

应该可以通过这种方式完全指定单步动画（而不必开始使用@keyframes），但现在似乎有很多实现特定的奇怪问题需要解决。请注意，在Firefox中没有执行任何动画...

- Steven Lu

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/

- gherkins

---

注意不要过多使用getComputedStyle。因为它必须更新整个页面的样式，所以它的开销相当大。如果你经常这样做，它会使UI卡顿。你可以批量处理以提高性能：创建所有对象，然后只获取一次getComputedStyle，最后设置所有更新。 - mmaclaurin

Answer 2

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

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

将在没有CSS的情况下工作，并且在webkit和mozilla上都可以使用。虽然这样做违背了尝试使用CSS3的初衷，但我想也是可以的。

- ryuusenshi

---

这会创建一个不流畅、不同步且外观糟糕的动画，它会淡入，然后开始移动。此外，如果元素由于高度设置而被切断，则在整个动画期间它将继续看起来被切断。 - Steven Lu

我应该补充一下，其中一些副作用可能是由于我在没有关闭过渡持续时间的情况下进行测试造成的，这将导致每次jQuery设置更改时都会应用过渡。显然这不好，所以当我有时间进行适当的测试时，我会回来报告jQuery animate()的性能。 - Steven Lu

这个解决方案在IE9中运行得非常好（这是唯一一个在使用jQuery进行动画处理时表现出色的浏览器）。它看起来太棒了，真的。 - Steven Lu