Angular动画的目的是什么？

I've been wondering for some time now why should I use Angular animations over CSS animations. I see few areas one might consider before using them:

我一直想知道为什么我应该使用Angular动画而不是CSS动画。我看到在使用它们之前可能会考虑的几个方面：

Performance

In the first step I found this question 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 states

在第一步中，我发现这个问题只涉及性能方面。接受的答案对我来说并不令人满意，因为它声明应尽可能使用CSS动画，以便在单独的线程中运行动画的优化可以应用。这似乎不正确，因为Angular文档说明了这一点

Angular animations are built on top of the standard Web Animations API and run natively on browsers that support it.

角度动画构建在标准Web动画API之上，并在支持它的浏览器上本机运行。

(emphasis mine)

（强调我的）

And when we look at Web Animations API Draft we see that the same optimizations can apply to Web Animations as to CSS specified in sheets.

当我们查看Web Animations API Draft时，我们发现相同的优化可以应用于Web动画，而不是在工作表中指定的CSS。

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.

虽然可以使用ECMAScript使用requestAnimationFrame [HTML]执行动画，但这些动画在声明动画方面的表现方式与它们在CSS级联中的表示方式以及可能的性能优化（例如在单独的线程上执行动画）有所不同。使用Web Animations编程接口，可以从脚本创建具有与声明性动画相同的行为和性能特征的动画。

(emphasis mine again)

（再次强调我的）

Apart from some browsers like IE don't support Web Animations, is there any reason to use either CSS declarations over Angular animations or vice versa? I see them as exchangeable performace-wise.

除了像IE这样的浏览器不支持Web动画，有没有理由使用CSS声明而不是Angular动画，反之亦然？我认为它们是可交换的性能。

More control over the animations

This might look as an argument for Angular animations, because you can 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.

这可能看起来像Angular动画的一个参数，因为你可以暂停动画或使用它等JS变量，但使用eg时也是如此。 CSS animation-play-state：暂停或使用JS中指定的CSS变量，请参阅文档。

Now I can see it might be inconvenient to set the CSS variables in JS code, but the same is true while using Angular animations. These are typically declared in @Component animations field and don't have, except for via the animation state data bound property, access to instance fields (if you don't create your animation via AnimationBuilder of course, which btw is also not very convenient or beautiful either).

现在我可以看到在JS代码中设置CSS变量可能不方便，但使用Angular动画时也是如此。这些通常在@Component动画字段中声明，除了通过动画状态数据绑定属性外，没有访问实例字段（如果你不通过AnimationBuilder创建你的动画当然，哪个btw也不是很方便或美丽的）。

Other point is, with Web Animations API it is possible to inspect, debug or test the animations, but I don't see how this is possible with Angular animations. If it is, could you please show me how? If it isn't, I really don't see any advantage of using Angular animations over CSS ones for the sake of control either.

另一点是，使用Web Animations API可以检查，调试或测试动画，但我不知道Angular动画是如何实现的。如果是的话，请你告诉我怎么样？如果不是这样，我真的没有看到使用Angular动画而不是CSS的优势也是为了控制。

Cleaner code

I've read for example here a paragraph stating that separating animations from "normal" styles is actually separation of behaviour and presentation. Is really declaring animations in styles sheets mixing those responsibilities? I saw that always the other way, especially looking at CSS rules in the @Component animations gave me a feeling of having CSS declarations on one too many places.

我在这里阅读了一个段落，说明将动画与“普通”样式分开实际上是行为和表现的分离。真的在样式表中声明动画混合了这些责任吗？我总是以另一种方式看到，特别是在@Component动画中查看CSS规则让我感觉在一个太多的地方都有CSS声明。

So how is it with Angular animations?

Is it just a convenience utility to extract animations away from the rest of the styles, or does it bring anything worthy feature-wise?
是否只是一种方便的工具，可以从其他样式中提取动画，还是带来任何有价值的功能？
Does a usage of Angular animations pay off only in special cases or is it a convention a team chooses to go all the way with it?
Angular动画的使用是否仅在特殊情况下得到回报，还是团队选择一直使用它的约定？

I would love to here about tangible advantages of using Angular animations. Thanks guys upfront!

我很想知道使用Angular动画的实际优势。先谢谢你们！

1 个解决方案

#1

So I did some research and although I didn't find any argument for nor against Angular animations performance-wise (as already stated in the question above), there are very good arguments to use Angular animations feature-wise which should be good enough for purists who want to have CSS only in sheets, at least in certain cases I will illustrate below.

所以我做了一些研究，虽然我没有找到任何关于Angular动画的论据，但是在上面的问题中已经说过了（如上面的问题中已经说明的那样），有很好的论据可以使用Angular动画的特征，这应该足够好了希望只在表格中使用CSS的纯粹主义者，至少在某些情况下我将在下面说明。

Let me list some useful features from which each alone makes a convincing case for Angular animations, majority of them can be found in Angular animations documentation:

让我列出一些有用的功能，每个功能都可以为Angular动画制作一个令人信服的案例，其中大部分都可以在Angular动画文档中找到：

Transition styles - these styles are only applied during transition from one state to another - only while an element is being animated, and one uses them like this:

过渡样式 - 这些样式仅在从一种状态转换到另一种状态期间应用 - 仅在元素被动画化时，并且使用它们如下：
```
transition('stateA => stateB', [style({...}), animate(100)])
```
Trying to do the same without Angular would require a CSS animation in 'stateB' styles with the same duration as the transition or assigning temporary styles for the time being and removing them after the animation duration via JS.

尝试在没有Angular的情况下执行相同的操作需要在'stateB'样式中使用CSS动画，其持续时间与转换相同或暂时分配临时样式，并在动画持续时间之后通过JS删除它们。
The void state (documentation) - Let's you animate elements being added or removed from the DOM.

void状态（文档） - 让你动画从DOM中添加或删除的元素。
```
transition('stateA => void', animate(...))
```
This is very cool because previously, although it was easy enough to animate the addition, the removal was more complicated and required to trigger animation, wait till its end and only after that remove the element from the DOM, all with JS.

这非常酷，因为之前虽然很容易为添加设置动画，但删除操作更复杂，需要触发动画，等到结束时才会从DOM中删除元素，所有这些都使用JS。
Automatic property calculation '*' (documentation) - Allows for performing traditionally difficult animations like height transitions for elements with dynamic height. This problem was especially bothering for CSS purists and required JS to check the current height of an element, assigning the precise heightto it and other procedures in order to perform a perfect animation. But now with Angular it is as easy as this:

自动属性计算'*'（文档） - 允许执行传统上困难的动画，例如具有动态高度的元素的高度过渡。这个问题特别困扰CSS纯粹主义者，并要求JS检查元素的当前高度，为其执行精确的高度和其他过程以执行完美的动画。但是现在使用Angular它就像这样简单：
```
trigger('collapsible', [
  state('expanded', style({ height: '*' })),
  state('collapsed', style({ height: '0' })),
  transition('expanded <=> collapsed', animate(100))
])
```
And the animation is smooth because the actual height of the element is used for the transition, not like with the prevalent max-height solution.

并且动画是平滑的，因为元素的实际高度用于过渡，而不像普遍的最大高度解决方案。
Animation callbacks (documentation) - this is something that wasn't exactly possible with CSS animations (if not maybe emulated with setTimeout) and is handy eg. for debugging.

动画回调（文档） - 这是CSS动画不可能完成的事情（如果没有用setTimeout模拟），并且很方便。用于调试。
Unlike stated in the question, it is actually possible to use instance fields as params in Angular animations, see this question. I find it much easier to use than manipulating CSS variables through DOM API as shown here on MDN.

与问题中所述不同，实际上可以在Angular动画中使用实例字段作为参数，请参阅此问题。我觉得使用它比通过DOM API操作CSS变量更容易，如MDN所示。

It is clear, that if you need one of features listed above, Angular is the way to go. Also when there is many animations to manage in a component, and this is just my personal opinion, I find it easier to organize animations the Angular way than have them in sheets, where it is harder too see the relationships between various element states.

很明显，如果您需要上面列出的功能之一，Angular就是您的选择。此外，当组件中有许多动画需要管理时，这只是我个人的意见，我发现以Angular方式组织动画比在表单中组织动画更容易，在这些组件中，更难以看到各种元素状态之间的关系。

#1