Angular动画的作用是什么？为何选用它而非CSS动画？

我最近一直在琢磨一个问题：为什么要选用Angular动画而非CSS动画？在决定投入使用其中一种之前，我觉得得从几个核心维度好好考量，首当其冲的就是性能。

之前我在社区看到过一个只探讨性能层面的提问，不过它的采纳答案我并不太认同——那个答案称“应尽可能使用CSS动画，因为能利用浏览器独立线程运行动画的优化”。但这说法其实并不准确，因为Angular官方文档里明确提到，Angular动画底层依托Web Animations API（部分场景会降级到CSS动画），同样能享受到浏览器的独立渲染线程优化，并不会阻塞主线程。

下面我就把自己梳理的几个考量维度分享给大家：

1. 性能：并非CSS独有的优势 #

• 很多开发者的固有印象是CSS动画一定比Angular动画高效，但实际情况是，Angular动画并不会额外增加性能负担。它和CSS动画一样，能让浏览器把动画渲染放到独立线程，避免干扰主线程的JS执行和页面交互。
• 如果你的动画需要和Angular组件的状态紧密绑定，用Angular动画反而能减少手动同步CSS类与组件状态的额外开销，避免不必要的重绘回流。

2. 组件集成与状态管理 #

• Angular动画和组件是深度绑定的，你可以直接在模板里通过组件属性控制动画状态，比如[@fadeInOut]="isComponentVisible"，状态变化完全由Angular的变更检测机制驱动，不用手动操作DOM的class或style，代码更简洁也更不易出错。
• 面对复杂的序列动画（比如先淡入、再平移、最后触发子组件动画），Angular的sequence()、group()等API能让你用声明式的方式组织动画逻辑，比写一堆CSS关键帧或过渡类要清晰得多，后期维护也更方便。

3. 动态性与业务联动 #

• 如果你的动画参数需要根据业务逻辑动态调整（比如根据用户设置修改动画时长、延迟，或者根据数据变化调整动画目标位置），Angular动画可以直接绑定组件属性，比如：

  <div [@slideAnimation]="{value: currentState, params: { duration: userDefinedDuration }}"></div>
  

  而CSS动画要实现这类动态效果，就得用JS手动修改样式，代码会变得繁琐且容易出错。
• Angular动画还支持动画完成回调（done()）、子动画控制（animateChild()）等特性，能轻松实现动画与业务流程的联动，比如动画结束后提交表单、加载新数据等场景。

4. 跨平台兼容性 #

• 如果你在开发Angular Universal（服务端渲染）或者移动端应用，Angular动画会自动处理不同平台的兼容性问题，无需手动添加CSS前缀或做特殊适配；而一些高级CSS动画特性在部分平台（比如旧版浏览器、某些移动端WebView）上支持不佳，需要额外做兼容处理。

总的来说，这两种方案没有绝对的优劣，关键看场景：

• 简单独立的UI动效（比如按钮hover、图标旋转），用CSS动画足够轻便高效；
• 动画与组件状态紧密关联、需要复杂序列控制或动态参数的场景，Angular动画会是更合适的选择，能让你的代码更易维护、更符合Angular的开发范式。

内容的提问来源于stack exchange，提问作者Daniel Macak