用途:在 Angular 应用中配置 UI 进入/离开、状态切换与列表等动画,围绕 @angular/animations 的触发器、状态、过渡、关键帧和可复用动画函数展开。适用 Angular 21(2025),标签含 Animations、UI、Transitions、Motion。
主要能力:使用 trigger、state、style、transition、animate 做基于状态的动画;编写 :enter/:leave 进入离开动画;用通配符状态(如 * => expanded)处理任意过渡;用 query 与 stagger 做列表动画;支持动画回调(@fade.start、@fade.done);可将动画提取为可复用 trigger;Angular 17+ 支持函数式动画写法。
使用方式:先通过 provideAnimations() 启用动画模块,例如 import { provideAnimations } from '@angular/platform-browser/animations'; 并在应用配置的 providers 中加入 provideAnimations()。随后在组件的 animations 元数据中声明 trigger 等动画定义,并在模板中用 [@fade] 绑定状态。必要命令与代码保持原样,不在此展开完整示例。
版本变化:新增 animateEnter 与 animateLeave,作为已弃用的 :enter/:leave 的替代;官方推荐 CSS 动画以获得更好性能;支持浏览器 View Transitions API。
性能与无障碍:优先对 transform 和 opacity 做动画,避免动画 width、height、margin、top 等高开销属性;为减少动态效果偏好提供支持(如将动画标记为 @.disabled)。
限制:资料未提供具体安装命令、包体积、兼容浏览器清单及收费信息,暂未提供。