Angular 动画的目的是什么？

Question

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

---

性能

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

Angular 动画建立在标准 Web Animations API 之上，并在支持它的浏览器上本地运行。

（强调我的）

当我们查看Web Animations API Draft 时，我们会发现同样的优化可以应用于 Web Animations 和在工作表中指定的 CSS。

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

（再次强调我的）

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

---

更好地控制动画

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

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

另一点是，使用 Web Animations API 可以检查、调试或测试动画，但我不知道 Angular 动画如何做到这一点。 如果是的话，你能告诉我怎么做吗？ 如果不是，我真的不认为使用 Angular 动画比 CSS 动画有任何优势以进行控制。

---

更干净的代码

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

---

那么 Angular 动画效果如何呢？

• 它只是从其他样式中提取动画的便利实用程序，还是带来了任何有价值的功能？
• Angular 动画的使用是否仅在特殊情况下才有回报，还是团队选择一直使用它的惯例？

我很想在这里了解使用 Angular 动画的切实优势。 先谢谢大家！

Answer 1

所以我做了一些研究，虽然我没有发现任何支持或反对 Angular 动画性能方面的论据（如上面的问题中所述），但有很好的论据可以使用 Angular 动画功能，这应该足够好至少在某些情况下只想在工作表中使用 CSS 的纯粹主义者。

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

1. 过渡样式- 这些样式仅在从一种状态过渡到另一种状态期间应用 - 仅在元素动画时应用，并且可以像这样使用它们：

    transition('stateA => stateB', [style({...}), animate(100)])

   尝试只对 CSS 做同样的事情可能无法表达前一个状态导致下一个状态。 如果动画必须根据初始状态而有所不同，但最终状态是相同的，那么它可能会非常笨拙。

2. void状态以及:enter和:leave别名（ void 文档、 :leave 和 :enter 文档）-让您可以对从 DOM 添加或删除的元素进行动画处理。

    transition('stateA => void', animate(...))

   这很酷，因为以前，虽然添加动画很容易，但删除更复杂，需要触发动画，等到它结束，然后才从 DOM 中删除元素，所有这些都使用 JS。

3. 自动属性计算'*' （ 文档）- 允许执行传统上困难的动画，例如具有动态高度的元素的高度过渡。 这个问题需要在元素上设置固定高度（不灵活），使用带有调整转换功能的 max-height（不完美）或使用 JS 查询元素的高度（可能导致不必要的回流）。 但是现在使用 Angular 就这么简单：

    trigger('collapsible', [ state('expanded', style({ height: '*' })), state('collapsed', style({ height: '0' })), transition('expanded <=> collapsed', animate(100)) ])

   并且动画流畅且“完整”，因为元素的实际高度用于过渡。

4. 动画回调（ 文档） - 这是 CSS 动画无法实现的（如果不能用setTimeout模拟）并且很方便，例如。 用于调试。

5. 与问题中所述不同，实际上可以在 Angular 动画中使用实例字段作为参数，请参阅此问题。 我发现它比通过 DOM API 操作 CSS 变量更容易使用，如MDN 上所示，更不用说某些浏览器的有限支持。

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