Angular 2动画 vs CSS动画 - 何时使用哪一个？

Question

我目前正在尝试使用Angular2的动画效果，并想知道它们与标准的CSS动画/过渡相比带来的具体优势。

例如，一个典型的材料设计卡片和悬停效果，使用的大多数CSS框架都是:hover和css-transitions。使用Angular 2动画是否有特定的优势？

我在某个地方读到说，一些CSS动画属性不会像GPU那样调用，因此会出现一些延迟和卡顿。Angular2动画又如何呢？

- Han Che

---

我对Angular并不了解，但我认为它们只是利用CSS动画。实际上，他们的文档中写道：“Angular的动画系统可以让你构建具有与纯CSS动画相同本地性能的动画。” 他们还指出，在可能的情况下，他们使用Web动画。当你搜索“angular 2 animation”时，它是谷歌搜索结果的第一个。 - GolezTrol

我认为Angular2动画只是在编译时创建CSS动画。优点是更容易在组件级别上添加和控制动画。 - Nicholas Tsaoucis

谢谢您的迅速回复，所以基本上我理解Angular 2动画通过方法（如animat()和style()）使得动画更具可控性。 - Han Che

是的，这主要就是它的作用。通过拥有这样一个通用的API，您可以更轻松地访问一些常用的动画，并在浏览器不支持某个特定功能或以不同方式实现它时提供优雅的回退。但我认为这实际上是任何库和框架（如Angular、jQuery和其他许多库和框架）的主要目标。 - GolezTrol

Answer 1

问题实际上更多地涉及 javascript动画 vs css动画（因为angular2的动画基于javascript-animation）。

答案是，当您可以时-使用CSS动画。

现代浏览器使用不同的线程来处理CSS动画，因此Javascript线程不受CSS动画的影响。

您可以使用HTML5 Animation Speed Test在您的浏览器中检查不同框架（基于javscript）和CSS动画的性能。

总体而言：

浏览器能够优化渲染流程。总之，我们应该尽可能使用CSS转换/动画来创建我们的动画。如果您的动画非常复杂，则可能不得不依赖于基于JavaScript的动画。

如果您想特别了解Angular2动画-只需在浏览器中检查元素，并检查动画是否是基于CSS（转换/animationFrame）还是javascript（您将能够在动画期间看到style属性中的值更改）。

- Dekel

---

很好，但尽管Angular是JavaScript，我认为它仍然使用CSS来进行动画。我不是专家，但我之前评论中提到的链接似乎对此很清楚。 - GolezTrol

@GolezTrol，请查看我在1分钟前更新的答案 :) 它解释了如何检查angular2动画是基于CSS还是JS的。 - Dekel

@Dekel，恕我直言，由于这个答案是谷歌搜索显示的第一个，并且投票数很高，我感到有必要回复。Angular使用web动画API来触发其动画，因此它不会通过JavaScript更改样式属性，因此具有良好的性能表现。 - Alex Okrushko

Answer 2

答案实际上在文档中：

https://angular.io/guide/animations

Angular的动画系统可以让你构建具有与纯CSS动画相同的本地性能运行的动画。 您还可以紧密集成您的动画逻辑与您的应用程序代码的其余部分，以便于控制。

它还抽象了需要跟踪动画长度以进行分阶段和避免过载浏览器或链接动画的需求。

一般来说，如果你只是简单的小事情，使用CSS可能更容易。但是，如果您在您的应用程序中始终执行动画，则从Angular Animations中获得大量功能而几乎没有副作用。

- jkyoutsey