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

angular 2 animation vs css animation - when to use what?

我目前正在试用 angular2 的动画,我想知道它们比标准 css animations/transitions.

有什么具体优势

例如典型的 material 设计的带有框阴影的卡片和悬停效果。大多数 css 框架使用 :hover 和 css-transitions。使用 angular 2 个动画有什么特别的优势吗?

我在某处读到一些 css 动画属性不会尽可能多地调用 GPU,因此有些延迟和滞后。 angular2 个动画怎么样?

问题其实更多的是javascript动画vscss动画(因为angular2的动画是基于javascript-动画)。

答案是什么时候可以 - 使用 CSS 动画

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

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

总的来说:

Browsers are able to optimize rendering flows. In summary, we should always try to create our animations using CSS transitions/animations where possible. If your animations are really complex, you can may have to rely on JavaScript-based animations instead.

如果您想具体了解 Angular2 动画 - 只需检查浏览器中的元素并检查动画是否有基于 CSS(transition/animationFrame 或 javascript (您将能够看到 style 属性中的值在动画期间发生变化)。

答案实际上在文档中:

https://angular.io/guide/animations

Angular's animation system lets you build animations that run with the same kind of native performance found in pure CSS animations. You can also tightly integrate your animation logic with the rest of your application code, for ease of control.

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

一般来说,如果你有一个简单的小东西,CSS 可能会更容易。但是如果你一直在你的应用程序中做动画,你会从 Angular Animations 中获得很多功能而几乎没有缺点。