效果

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

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

（强调我的）

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

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

（再次强调我的）

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

清洁代码

我已经阅读了例如here一个段落，指出将动画与“普通”样式分开实际上是行为和表现的分离。 真的在样式表中声明动画混合了这些职责吗？我总是以另一种方式看到这一点，特别是在AnimationBuilder动画中查看CSS规则让我感觉一下也有CSS声明很多地方。

那么Angular动画怎么样？

从其他风格中提取动画是否只是一个方便实用工具，还是它带来了任何有价值的功能？
Angular动画的使用是否仅在特殊情况下得到回报，还是团队选择随身携带的约定？

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

Answer 1

所以我做了一些研究，虽然我没有找到任何关于Angular动画的论证，但是在上面的问题中已经说过，有很好的论据可以使用Angular动画。 对于想要只在表格中使用CSS的纯粹主义者来说应该足够好了，至少在某些情况下我会在下面说明。

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

过渡样式 - 这些样式仅在从一种状态转换到另一种状态时应用 - 仅在动画元素时使用它们，并且使用它们：
```
transition('stateA => stateB', [style({...}), animate(100)])
```
尝试在没有Angular的情况下执行相同的操作需要在'stateB'样式中使用CSS动画，其持续时间与转换相同或暂时分配临时样式，并在动画持续时间之后通过JS删除它们。
< / LI>
void 状态（documentation） - 让您为DOM中添加或删除的元素设置动画。
```
transition('stateA => void', animate(...))
```
这非常酷，因为之前虽然很容易为添加设置动画，但删除操作更复杂，需要触发动画，等到结束时才会从DOM中删除元素，所有这些都使用JS。
自动属性计算 '*'（documentation） - 允许执行传统上难度较高的动画，例如height transitions for elements with dynamic height。这个问题特别困扰CSS纯粹主义者，并要求JS检查元素的当前高度，为其执行精确的高度和其他过程以执行完美的动画。但是现在使用Angular它就像这样容易：
```
trigger('collapsible', [
  state('expanded', style({ height: '*' })),
  state('collapsed', style({ height: '0' })),
  transition('expanded <=> collapsed', animate(100))
])
```
动画很流畅，因为元素的实际高度用于过渡，而不像流行的max-height solution。
动画回调（documentation） - 这是使用CSS动画无法完全实现的（如果不是可能使用setTimeout进行模拟）并且非常方便例如。用于调试。
与问题中所述不同，实际上可以将实例字段用作Angular动画中的参数，请参阅this question。我觉得使用它比通过DOM API操纵CSS变量更容易，如here on MDN所示。

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

Angular动画的目的是什么？

效果

更多控制动画

清洁代码

那么Angular动画怎么样？

1 个答案: