我怎样才能使这个动画更流畅？

Posted 2023-03-06

【中文标题】我怎样才能使这个动画更流畅？

【英文标题】：How can I make this animation smoother?

【发布时间】：2014-08-07 21:43:49

【问题描述】：

我有一个小 plnkr，我用它来玩 AngularJS 和 ngAnimate。我现在正在学习 css3 转换和转换。折叠/展开动画看起来很酷，但是在动画完成之前元素会占用它最终会占用的所有空间。折叠时更糟，因为文本会缩小并消失，但随后容器会突然关闭而不是优雅地关闭。

http://plnkr.co/edit/hzJlOstUCeH2sB47OstS?p=preview

我一直在尝试模拟 JQuery 的 slideDown 动画，但除非我知道动画要达到的高度，否则我似乎无法让这个动画变得流畅。有谁知道 JQuery 的 slideDown 函数如何能够平滑地为可变高度元素设置动画？

【问题讨论】：

你更新了 plunker - 它与 .gif 版本不同。

@arturgrzesiak 是的，我做到了。一旦我有了解决方案，我就会继续更新我的演示。该演示现在可以正常工作。感谢您阅读我的问题:)

【参考方案1】：

我可以通过更改line-height 使折叠/展开动画看起来更流畅。这使我可以在不知道总高度的情况下为线条设置动画。这是demo。这可能不是您想要的样子，但它比以前更平滑。我怀疑 JQuery 的 slideDown 对计算出的高度做了什么，但我不确定。

【讨论】：

这样做有点生涩，但我认为它比以前更好。谢谢你:)

我不知道为什么浏览器在动画时会出现性能问题。我运行了一个 Chrome 时间线，它有时会低于 30 fps，这不是由于重新绘制。另一方面，IE 运行起来非常顺滑。可能有更好的方法，但可能更复杂。

另外，你应该使用 -webkit-transform，因为 scale() 仅在 Chrome 的 -web-kit-transform 中可用

这很奇怪。我正在使用 Chrome 并且没有供应商前缀的缩放似乎正在工作 o_O

在 Firefox 和 IE 中效果很好 :)