angular 2动画vs css动画-什么时候使用什么？

Question

我目前正在尝试Angular2的动画，我想知道它们比标准css动画/过渡带来了什么具体的优势。

例如，一个典型的材质设计的卡片和悬停效果与方框阴影。大多数css框架使用:hover和css转换。使用angular 2动画有什么特别的优势吗？

我在某处读到一些css动画属性不会调用GPU那么多，因此会有一些延迟和滞后。那angular2动画呢？

Answer 1

问题实际上是更多的javascript动画与css动画(因为angular2的动画是基于javascript动画)。

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

现代浏览器使用different thread进行CSS动画，因此javascript线程不受CSS动画的影响。

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

一般而言：

浏览器能够优化呈现流。总之，在可能的情况下，我们应该总是尝试使用CSS过渡/动画来创建动画。如果您的动画真的很复杂，那么您可能不得不依赖基于JavaScript的动画。

如果你想知道关于Angular2动画的具体信息--只需在浏览器中检查元素，并检查动画中是否有CSS(基于过渡/动画框架或javascript )(您将能够在动画过程中看到style属性中的值变化)。

Answer 2

答案实际上就在文档中：

https://angular.io/guide/animations

CSS的动画系统允许您构建与纯

动画中相同类型的本机性能运行的动画。您还可以将动画逻辑与应用程序代码的其余部分紧密集成，以便于控制。

它还消除了跟踪动画长度的需要，以便交错并避免浏览器过载或链接动画。

一般来说，如果你有一个简单的小东西，CSS可能会更容易。但是，如果你一直在你的应用程序中做动画，你会从Angular Animations中获得很大的动力，但几乎没有负面影响。