角度2动画vs css动画 - 何时使用什么？

Question

我正在尝试使用angular2的动画,我想知道它们对标准css动画/过渡有什么特别的优势.

例如,典型的材料设计卡和悬停效果与框阴影.大多数css框架使用:hover和css-transitions.使用角度2动画有特别的优势吗？

我在某处读到某些css动画属性并没有调用GPU那么多,因此有一些延迟和滞后.angular2动画怎么样？

Answer 1

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

答案是,当你可以 - 使用CSS动画.

现代浏览器对CSS动画使用不同的线程,因此javascript线程不受CSS动画的影响.

您可以使用HTML5动画速度测试来检查浏览器中不同框架(基于javscript的)VS CSS动画的性能.

一般来说:

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

如果你想特别了解Angular2动画 - 只需检查浏览器中的元素并检查动画是否有CSS(基于转换/动画框架或javascript(您将能够style在动画期间看到属性更改中的值) .

@Dekel,得到应有的尊重,因为这个答案是第一个出现在谷歌搜索中并且投票数高的人我觉得有必要回复.Angular使用[web animations api](https://github.com/angular/angular/blob/master/packages/animations/browser/src/render/web_animations/web_animations_player.ts#L77)来触发它的动画,所以它不是通过javascript更改样式属性,因此非常高效. (10认同)

Answer 2

答案实际上在文档中:

Angular的动画系统允许您构建运行与纯CSS动画中相同的本机性能的动画.您还可以将动画逻辑与其他应用程序代码紧密集成,以便于控制.

它还抽象出需要跟踪动画的长度,以便错开并避免浏览器过载或链接动画.

通常,如果你有一个简单的小东西,CSS可能更容易.但是如果你一直在你的应用程序中做动画,你将获得很多力量,而Angular Animations则很少.