我已经想了一段时间了.在使用它们之前,我很少看到人们可能会考虑的领域:
性能
在第一步中,我发现这question只涉及性能方面的事情.被接受的答案对我来说并不令人满意,因为它表明one should use CSS animations wherever possible so that optimizations like running the animations in separate thread can apply.这似乎不是真的,因为有Angular documentation个州
Angular 动画为built on top of the standard Web Animations API,在支持它的浏览器上本地运行.
(强调我的)
当我们看Web Animations API Draft的时候,我们发现同样的优化可以应用于Web动画,就像应用于工作表中指定的CSS一样.
虽然可以使用ECMAScript通过requestAnimationFrame[HTML]执行动画,但就它们在CSS级联中的表示方式和可能的性能优化(如在单独的线程上执行动画)而言,此类动画的行为与声明性动画不同.Using the Web Animations编程接口,它是来自脚本that have the same behavior and performance characteristics as declarative animations的possible to create animations.
(再次强调我的)
除了像IE这样的一些浏览器不支持网络动画之外,is there any reason to use either CSS declarations over Angular animations or vice versa?我认为它们在性能上是可以互换的.
更好地控制动画
这可能看起来像是Angular 动画的参数,因为您可以对它使用pause animation或使用JS变量,等等,但在使用Eg时也是如此.CSS animation-play-state: pause
或使用JS中指定的CSS variables,参见documentation.
现在我可以看到,在JS代码中设置CSS变量可能不太方便,但使用Angular 动画时也是如此.它们通常在@Component
-animations
字段中声明,并且除了通过动画状态数据绑定属性之外,不具有对实例字段的访问权限(当然,如果您不通过AnimationBuilder
创建动画,那么这也不是非常方便或美观).
另一点是,使用Web Animations API可以inspect, debug or test个动画,但我看不出使用Angular 动画怎么可能做到这一点.如果是的话,你能告诉我怎么做吗?如果不是,我真的是don't see any advantage of using Angular animations over CSS ones for the sake of control either岁.
更干净的代码
例如,我读了here个段落,指出将动画与"正常"风格分开实际上是行为和表现的分离.Is really declaring animations in styles sheets mixing those responsibilities?我总是以另一种方式看到这一点,特别是看着@Component
个动画中的CSS规则,让我有一种在太多地方有CSS声明的感觉.
那么Angular 动画效果如何呢?
- 它只是一个从睡觉风格中提取动画的方便实用程序,还是带来了一些有价值的功能方面的东西?
- Angular 动画的使用是否只在特殊情况下有效,还是团队 Select 一直这样做是一种惯例?
我想在这里谈谈使用Angular 动画的实际优势.谢谢大家!