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

Posted 2023-03-06

【中文标题】角度 2 动画与 css 动画 - 何时使用啥？

【英文标题】：angular 2 animation vs css animation - when to use what?角度 2 动画与 css 动画 - 何时使用什么？

【发布时间】：2017-04-18 08:54:04

【问题描述】：

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

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

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

【问题讨论】：

好吧，我对 Angular 了解不多，但我认为它们只是利用了 CSS 动画。 In fact their docs say：“Angular 的动画系统让您构建的动画运行时具有与纯 CSS 动画相同的原生性能。”。他们还指定使用web animations，其中possible。当您在 Google 上搜索“angular 2 动画”时，这是第一次点击

我相信angular2动画在编译时只是创建了css动画。优点是能够更轻松地在组件级别添加和控制动画。

感谢您的快速响应，所以基本上我从 angular 2 动画中得到的是使动画更可控的方法（如 anmat() 和 style()）（？）

是的，主要就是这样。通过拥有这样的通用 API，您可以使一些常用动画更易于访问，并且可以在浏览器不支持某个功能或以不同方式实现它时提供优雅的回退。但我认为这实际上是大多数库和框架的目标，例如 Angular、jQuery 和许多其他的。

【参考方案1】：

答案实际上在文档中：

https://angular.io/guide/animations

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

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

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

【参考方案2】：

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

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

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

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

一般：

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

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

【讨论】：

这很好，但是虽然 Angular 是 JavaScript，但我认为它仍然使用 CSS 来制作动画。这里没有专家，但我在之前的评论中提到的链接似乎对此很清楚。

@GolezTrol，检查从 1 分钟前到我的回答的更新 :) 它解释了如何检查 angular2 的动画是基于 css 还是 js。

@Dekel，恕我直言，因为这个答案是第一个出现在谷歌搜索中并且投票数很高的答案，我觉得有必要回复。 Angular 使用web animations api 来触发其动画，因此它不会通过 javascript 更改样式属性，因此非常高效。