角度动画的目的是什么？

Question 1

我一直想知道为什么我应该在CSS动画上使用Angular动画。我发现人们在使用它们之前可能会考虑的几个方面：

性能

在第一步中，我发现这个问题只与物联网服务表现方面的交易。接受的答案对我来说并不令人满意，因为它指出应该尽可能使用CSS动画，以便可以应用诸如在单独线程中运行动画之类的优化。这似乎不是事实，因为Angular文档指出

角动画建立在标准Web动画API的基础上，并在支持该动画的浏览器上本地运行。

（强调我的）

而且，当我们查看Web动画API草案时，我们发现可以对Web动画应用与表中指定的CSS相同的优化。

尽管可以使用ECMAScript通过requestAnimationFrame [HTML]来执行动画，但是这种动画的行为与声明性动画不同，就其在CSS级联中的表示方式以及可能的性能优化（例如在单独的线程上执行动画）而言。使用Web动画编程界面，可以从脚本创建与声明性动画具有相同行为和性能特征的动画。

（再次强调我的）

除了IE等某些浏览器不支持Web动画外，是否有任何理由在Angular动画上使用CSS声明，反之亦然？我认为它们是可互换的性能。

更好地控制动画

这可能是Angular动画的一个参数，因为您可以暂停动画或将JS变量与其一起使用，等等，但是使用eg时也是如此。CSSanimation-play-state: pause或使用JS中指定的CSS变量，请参见说明文件。

现在，我看到在JS代码中设置CSS变量可能不方便，但是在使用Angular动画时也是如此。这些通常是在@Component animations字段中声明的，除了通过动画状态数据绑定属性之外，没有访问实例字段的权限（AnimationBuilder当然，如果您不通过动画创建动画，顺便说一句也不太方便或美观）。

另一点是，使用Web Animations API可以检查，调试或测试动画，但是我看不到Angular动画怎么可能。如果是，请您告诉我如何？如果不是这样，那么我也确实没有发现为了控制而使用Angular动画而不是CSS动画有什么好处。

清洁代码

例如，我在这里阅读了一段，指出将动画与“常规”样式分开实际上是将行为和表现形式分开。确实是在样式表中声明动画来混合这些职责吗？我总是看到另一种方式，尤其是看@Component动画中的CSS规则时，让我感觉到在太多地方都有CSS声明。

那么Angular动画怎么样？

从其他样式中提取动画只是一种便利实用程序，还是它带来了一些有价值的功能？
使用Angular动画是否仅在特殊情况下才会奏效，还是团队选择沿袭这一惯例？

我想在这里谈谈使用Angular动画的明显优势。谢谢大家提前！

Question 2

因此，我进行了一些研究，尽管我没有找到支持或反对Angular动画性能的任何理由（正如上面的问题中所述），但是有很多很好的论据可以使用Angular动画功能，这对于至少在某些情况下仅希望在表单中使用CSS的纯粹主义者。

让我列出一些有用的功能，其中每个功能对于Angular动画来说都是令人信服的。大多数可以在Angular动画文档中找到：

过渡样式-这些样式仅在从一种状态过渡到另一种状态时应用-仅在元素处于动画状态时使用，如下所示使用它们：
```
transition('stateA => stateB', [style({...}), animate(100)])
```
仅使用CSS尝试执行相同操作可能不会表现出哪个状态导致下一个状态。如果动画必须基于初始状态而最终状态相同，则可能会完全笨拙。
在void与国家一起:enter和:leave别名（空白文档，：休假和：输入文档） -让您添加或从DOM删除动画元素。
```
transition('stateA => void', animate(...))
```
这非常酷，因为以前虽然可以轻松地为添加的动画制作动画，但是删除操作更为复杂，并且需要触发动画，直到动画结束，直到从DOM删除元素之后，所有操作都使用JS。
自动属性计算 '*'（文档）-允许执行传统上困难的动画，例如为具有动态高度的元素执行高度转换。此问题可能需要在元素上设置固定高度（不灵活），将max-height与调整的过渡函数一起使用（不完美）或通过JS查询元素的高度（可能导致不必要的回流）。但是，现在有了Angular，它就像这样简单：
```
trigger('collapsible', [
  state('expanded', style({ height: '*' })),
  state('collapsed', style({ height: '0' })),
  transition('expanded <=> collapsed', animate(100))
])
```
而且动画是平滑且“完整的”，因为元素的实际高度用于过渡。
动画回调（文档）-这是CSS动画无法实现的（如果可能未使用进行模仿setTimeout），并且非常方便。用于调试。
与问题中所述不同，实际上可以在Angular动画中将实例字段用作参数，请参见此问题。我发现使用它比通过DOM API操纵CSS变量要容易得多，如MDN所示，更不用说某些浏览器的有限支持了。

如果您需要上面列出的任何功能，Angular可能是完成此任务的更好工具。同样，当一个组件中要管理许多动画时，这只是我个人的看法，我发现以Angular方式组织动画要比将它们包含在工作表中更容易，在这种情况下，也很难看到它们与各种元素状态之间的关系。。