Angular 动画的目的是什么？
What is the purpose of Angular animations?
一段时间以来我一直在想 为什么我应该使用 Angular 动画而不是 CSS 动画 。我看到在使用它们之前可能会考虑的几个方面：
性能
第一步我发现了这个 which deals only with performace side of things. The accepted answer is not satisfying for me because it states that one should use CSS animations wherever possible so that optimizations like running the animations in separate thread can apply. This doesn't seem to be true, because Angular documentation状态
Angular animations are built on top of the standard Web Animations API and run natively on browsers that support it.
（强调我的）
当我们查看 Web Animations API Draft 时，我们发现与工作表中指定的 CSS 相同的优化可以应用于 Web 动画。
While it is possible to use ECMAScript to perform animation using requestAnimationFrame [HTML], such animations behave differently to declarative animation in terms of how they are represented in the CSS cascade and the performance optimizations that are possible such as performing the animation on a separate thread. Using the Web Animations programming interface, it is possible to create animations from script that have the same behavior and performance characteristics as declarative animations.
（再次强调我的）
除了 IE 等某些浏览器不支持 Web 动画外，是否有任何理由在 Angular 动画上使用 CSS 声明，反之亦然？ 我认为它们在性能方面是可交换的。
对动画的更多控制
这可能看起来是 Angular 动画的论据，因为您可以 pause animation or use JS variables with it etc., but the same is true while using eg. CSS animation-play-state: pause or using CSS variables specified in JS, see documentation.
现在我可以看出在JS代码中设置CSS变量可能不方便，但是在使用Angular动画时也是如此。这些通常在 @Component animations 字段中声明并且没有，除了通过动画状态数据绑定 属性，访问实例字段（如果你不通过创建动画AnimationBuilder当然，顺便说一句，这也不是很方便，也不是很漂亮。
另一点是，使用网络动画 API 可以 inspect, debug or test 动画，但我看不出 Angular 动画如何实现。如果是的话，你能告诉我怎么做吗？如果不是，我真的 看不出使用 Angular 动画比 CSS 动画有任何优势 .
更简洁的代码
例如，我读过 here 一段说明将动画与“正常”样式分开实际上是行为和呈现的分离。 真的在样式表中声明动画混合了这些职责吗？我总是看到相反的情况，尤其是查看 @Component 动画中的 CSS 规则让我有一种感觉在太多地方有 CSS 声明。
Angular 动画效果如何？
- 它只是一个从其他样式中提取动画的便利工具，还是它带来了任何有价值的功能？
- Angular 动画的使用是否仅在特殊情况下才有回报，还是团队选择一直使用它的惯例？
我很想在这里了解使用 Angular 动画的切实优势。先谢谢你们了！
所以我做了一些研究，虽然我没有找到任何支持或反对 Angular 动画的论点 performance-wise（如上面的问题所述），有使用 Angular 动画 feature-wise 的非常好的论据，对于希望仅在工作表中使用 CSS 的纯粹主义者来说应该足够好，至少在某些情况下是这样。
让我列出一些有用的功能，其中每个功能都为 Angular 动画提供了令人信服的案例。其中大部分可以在 Angular animations documentation:
中找到
过渡样式 - 这些样式仅在从一种状态过渡到另一种状态时应用 - 仅在元素正在动画时应用，并且人们像这样使用它们:
transition('stateA => stateB', [style({...}), animate(100)])
尝试对 CSS 做同样的事情可能无法表达前一个状态导致下一个状态。如果动画必须根据初始状态而不同但结束状态相同，则可能会非常笨拙。
void状态连同:enter和 :leave 别名 (void documentation, :leave and :enter documentation) - 让您为添加或删除的元素设置动画 DOM。
transition('stateA => void', animate(...))
这很酷，因为以前，虽然添加动画很容易，但删除更复杂，需要触发动画，等到结束，然后才从 DOM, 全部用JS.
自动属性计算'*'(documentation) - Allows for performing traditionally difficult animations like height transitions for elements with dynamic height。这个问题需要在元素上设置固定高度(不灵活），使用 max-height 和调整过的转换函数（不完美）或使用 JS 查询元素的高度（可能导致不必要的回流）。但是现在使用 Angular 就这么简单：
trigger('collapsible', [
state('expanded', style({ height: '*' })),
state('collapsed', style({ height: '0' })),
transition('expanded <=> collapsed', animate(100))
])
而且动画很流畅"complete"因为元素的实际高度用于过渡。
动画回调 (documentation) - 这是 CSS 动画无法做到的（如果不能模拟的话）使用 setTimeout) 并且很方便，例如。用于调试。
与问题中所述不同，实际上可以在 Angular 动画中使用实例字段作为参数，参见 . I find it much easier to use than manipulating CSS variables through DOM API as shown here on MDN ，更不用说某些浏览器的有限支持了。
如果您需要上面列出的任何功能，Angular 可能是完成任务的更好工具。此外，当一个组件中有许多动画需要管理时，这只是我个人的看法，我发现以 Angular 方式组织动画比将它们放在工作表中更容易，后者更难看到它们之间的关系和各种元素状态。
一段时间以来我一直在想 为什么我应该使用 Angular 动画而不是 CSS 动画 。我看到在使用它们之前可能会考虑的几个方面：
性能
第一步我发现了这个
Angular animations are built on top of the standard Web Animations API and run natively on browsers that support it.
（强调我的）
当我们查看 Web Animations API Draft 时，我们发现与工作表中指定的 CSS 相同的优化可以应用于 Web 动画。
While it is possible to use ECMAScript to perform animation using requestAnimationFrame [HTML], such animations behave differently to declarative animation in terms of how they are represented in the CSS cascade and the performance optimizations that are possible such as performing the animation on a separate thread. Using the Web Animations programming interface, it is possible to create animations from script that have the same behavior and performance characteristics as declarative animations.
（再次强调我的）
除了 IE 等某些浏览器不支持 Web 动画外，是否有任何理由在 Angular 动画上使用 CSS 声明，反之亦然？ 我认为它们在性能方面是可交换的。
对动画的更多控制
这可能看起来是 Angular 动画的论据，因为您可以 pause animation or use JS variables with it etc., but the same is true while using eg. CSS animation-play-state: pause or using CSS variables specified in JS, see documentation.
现在我可以看出在JS代码中设置CSS变量可能不方便，但是在使用Angular动画时也是如此。这些通常在 @Component animations 字段中声明并且没有，除了通过动画状态数据绑定 属性，访问实例字段（如果你不通过创建动画AnimationBuilder当然，顺便说一句，这也不是很方便，也不是很漂亮。
另一点是，使用网络动画 API 可以 inspect, debug or test 动画，但我看不出 Angular 动画如何实现。如果是的话，你能告诉我怎么做吗？如果不是，我真的 看不出使用 Angular 动画比 CSS 动画有任何优势 .
更简洁的代码
例如，我读过 here 一段说明将动画与“正常”样式分开实际上是行为和呈现的分离。 真的在样式表中声明动画混合了这些职责吗？我总是看到相反的情况，尤其是查看 @Component 动画中的 CSS 规则让我有一种感觉在太多地方有 CSS 声明。
Angular 动画效果如何？
- 它只是一个从其他样式中提取动画的便利工具，还是它带来了任何有价值的功能？
- Angular 动画的使用是否仅在特殊情况下才有回报，还是团队选择一直使用它的惯例？
我很想在这里了解使用 Angular 动画的切实优势。先谢谢你们了！
所以我做了一些研究，虽然我没有找到任何支持或反对 Angular 动画的论点 performance-wise（如上面的问题所述），有使用 Angular 动画 feature-wise 的非常好的论据，对于希望仅在工作表中使用 CSS 的纯粹主义者来说应该足够好，至少在某些情况下是这样。
让我列出一些有用的功能，其中每个功能都为 Angular 动画提供了令人信服的案例。其中大部分可以在 Angular animations documentation:
中找到过渡样式 - 这些样式仅在从一种状态过渡到另一种状态时应用 - 仅在元素正在动画时应用，并且人们像这样使用它们:
transition('stateA => stateB', [style({...}), animate(100)])尝试对 CSS 做同样的事情可能无法表达前一个状态导致下一个状态。如果动画必须根据初始状态而不同但结束状态相同，则可能会非常笨拙。
void状态连同:enter和:leave别名 (void documentation, :leave and :enter documentation) - 让您为添加或删除的元素设置动画 DOM。transition('stateA => void', animate(...))这很酷，因为以前，虽然添加动画很容易，但删除更复杂，需要触发动画，等到结束，然后才从 DOM, 全部用JS.
自动属性计算
'*'(documentation) - Allows for performing traditionally difficult animations like height transitions for elements with dynamic height。这个问题需要在元素上设置固定高度(不灵活），使用 max-height 和调整过的转换函数（不完美）或使用 JS 查询元素的高度（可能导致不必要的回流）。但是现在使用 Angular 就这么简单：trigger('collapsible', [ state('expanded', style({ height: '*' })), state('collapsed', style({ height: '0' })), transition('expanded <=> collapsed', animate(100)) ])而且动画很流畅"complete"因为元素的实际高度用于过渡。
动画回调 (documentation) - 这是 CSS 动画无法做到的（如果不能模拟的话）使用
setTimeout) 并且很方便，例如。用于调试。与问题中所述不同，实际上可以在 Angular 动画中使用实例字段作为参数，参见
如果您需要上面列出的任何功能，Angular 可能是完成任务的更好工具。此外，当一个组件中有许多动画需要管理时，这只是我个人的看法，我发现以 Angular 方式组织动画比将它们放在工作表中更容易，后者更难看到它们之间的关系和各种元素状态。