随着 Web 技术的不断进步，前端框架 Angular 也在不断地进化和优化。最近，Angular 团队提出了一个关于动画系统重构的提案，旨在为开发者提供更加现代化、高效和易于使用的动画解决方案。

动画系统的现状与改革

Angular 早期推出了@angular/animations包，为开发者提供了强大的动画功能。然而，随着时间的推移，Web 平台的原生 CSS 动画能力有了显著的提升，而@angular/animations包的局限性也日益凸显：包的体积较大，性能不足，且与现代 CSS 动画特性存在重叠。

为了解决这些问题，Angular 团队提出了一个彻底的改革计划：废弃现有的动画包，引入两个新的原生特性 ——animate.in和animate.out。这一改革的目标是利用 CSS 的强大功能，同时保持与第三方动画库的兼容性，如 GSAP 和 Anime.js。

animate.in和animate.out的亮点

新的动画特性animate.in和animate.out专注于提供一个简洁的 API，使得在 Angular 应用中添加动画变得更加容易。这两个特性允许开发者通过 CSS 类来控制元素进入和离开 DOM 时的动画效果。此外，它们还支持自定义函数，以便与复杂的第三方动画库集成。

• animate.in：控制元素进入视图时的动画效果。
• animate.out：控制元素离开视图时的动画效果。

社区反馈与讨论

在 GitHub 上的讨论中，开发者们对新的动画特性表示了积极的态度，并提出了一系列有见地的建议和反馈。一些关键的讨论点包括：

• 是否应该支持直接在模板中设置样式的选项。
• animate.in是否在现有的 CSS 平台已支持@starting-styles的情况下仍然必要。
• 动画命名的偏好，例如animate.in/animate.out与animate.enter/animate.leave。
• 动画函数使用的优选方式，是回调函数还是基于ExtendableEvent的方法。

未来展望

虽然新的动画特性目前还在讨论阶段，但它已经引起了前端开发者社区的广泛关注。Angular 团队正在积极收集反馈，并计划在未来的版本中实施这些新特性。开发者可以期待一个更加现代化、轻量化和灵活化的 Angular 动画系统，以及更加丰富和逼真的用户界面体验。

原文地址：https://github.com/angular/angular/discussions/62212