Javascript 角度动画的目的是什么？

一段时间以来，我一直想知道为什么我应该使用角度动画而不是CSS动画。在使用它们之前，我很少看到一些领域：

---

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

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

（强调矿山）

当我们看网页时，我们会发现网页动画的优化效果与页面中指定的CSS相同

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

（再次强调我的）

除了像IE这样的浏览器不支持网络动画外，还有什么理由在角度动画上使用CSS声明，或者反之亦然？我认为它们是可交换的性能

---

对动画的更多控制 这可能看起来是角度动画的一个参数，因为您可以使用JS变量等，但在使用例如CSS

动画播放状态：pause

或使用JS中指定的CSS变量时也是如此，请参阅

现在我可以看出，在JS代码中设置CSS变量可能不方便，但在使用角度动画时也是如此。这些通常在

@Component

animations

字段中声明，并且除了通过animation state data bound属性外，没有对实例字段的访问权限（当然，如果您没有通过

AnimationBuilder

创建动画，顺便说一句，这也不是很方便或漂亮）

另一点是，使用Web动画API可以创建动画，但我不知道如何使用角度动画实现这一点。如果是，你能告诉我怎么做吗？如果不是的话，我真的不认为为了控制而使用角度动画比CSS动画有任何优势

---

清洁代码 例如，我读过一段话，说将动画与“正常”风格分开实际上是将行为和表现分开真的是在样式表中声明动画混合了这些职责吗？我看到的总是另一种方式，尤其是查看

@组件中的CSS规则

动画让我感觉CSS声明的位置太多了

---

那么角度动画效果如何呢？

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

---

我想在这里谈谈使用角度动画的实际优势。谢谢大家

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

让我列出一些有用的特性，其中每一个特性都为角度动画提供了令人信服的理由。其中大部分可在以下网站找到：

转换样式-这些样式仅在从一种状态转换到另一种状态期间应用-仅当元素处于动画状态时应用，并且使用方式如下：

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

仅对CSS进行同样的尝试可能不会像以前的状态导致下一个状态那样具有表现力。如果动画必须基于初始状态而有所不同，但最终状态相同，则动画可能会非常笨拙

无效

状态与

一起：输入

和

：保留

别名（，）-可让您对从DOM中添加或删除的元素进行动画处理。

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

这是非常酷的，因为之前，虽然添加动画很容易，但移除更复杂，需要触发动画，直到其结束，然后才从DOM中移除元素，所有操作都使用JS

自动属性计算

'*'

（）-允许执行传统上困难的动画，如。这个问题需要在元素上设置固定高度（不灵活），在调整的转换函数中使用最大高度（不完美），或者使用JS查询元素的高度（可能导致不必要的回流）。但现在使用Angular就很容易了：

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

触发器（'可折叠'[
状态（'expanded'，样式（{height:'*'}）），
状态（'折叠'，样式（{height:'0'}）），
过渡（“展开-折叠”，设置动画（100））
])

动画平滑且“完整”，因为元素的实际高度用于过渡

动画回调（）-这是CSS动画无法实现的（如果没有，可能会用

setTimeout

进行模拟），并且非常方便，例如用于调试

与问题中所述不同，