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

Question

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

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

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

score 33 · Accepted Answer

问题实际上更多的是javascript 动画与 css 动画（因为 angular2 的动画是基于 javascript-animation 的）。

答案是何时可以使用 CSS 动画。

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

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

一般来说：

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

如果您想具体了解 Angular2 动画 - 只需检查浏览器中的元素并检查动画是否存在 CSS（基于过渡/动画帧或 javascript（您将能够style在动画期间看到属性更改中的值） .

score 24 · Accepted Answer

答案实际上在文档中：

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

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

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

2 回答 2