angular 2动画vs css动画 - 什么时候使用什么？ [英] angular 2 animation vs css animation - when to use what?
问题描述
我目前正在尝试angular2的动画，我想知道他们带来的标准css动画/过渡的具体优势。
I'm currently trying out angular2's animation and I was wondering what specific advantage they bring over standard css animations/transitions.
一个典型的材料设计卡和悬停效果与箱阴影。大多数css框架使用：hover和css转换。在使用angular 2动画有特别的优势吗？
e.g. a typical material designed card and hover effects with the box shadows. Most css frameworks use :hover and css-transitions. Is there a particular advantage in using angular 2 animations?
我读某处css动画属性不调用GPU那么多，因此有一些延迟和滞后。
I read somewhere that some css animation properties don't invoke the GPU as much, hence there's somethings delays and lags. What about angular2 animations?
推荐答案
问题实际上是更多 javascript动画vs css动画动画是基于javascript-animation）。
The question is actually more javascript animation vs css animation (because angular2's animations are based on javascript-animation).
答案是，当你可以使用CSS动画。
现代浏览器对CSS动画使用不同的线程，因此JavaScript线程不受CSS动画的影响。
Modern browsers uses different thread for CSS animation, so the javascript-thread is not affected by the CSS animations.
您可以使用 HTML5 Animation Speed Test 检查浏览器中不同框架（基于javscript）VS CSS动画的效果。
You can use the HTML5 Animation Speed Test to check the preformance of different frameworks (javscript-based) VS CSS animation in your browser.
一般情况下：
浏览器能够优化呈现流。总之，我们应该尽可能使用CSS转换/动画创建我们的动画。如果您的动画非常复杂，您可能需要依靠基于JavaScript的动画。
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 属性在动画过程中改变）。
If you want to know specifically regarding the Angular2 animations - just inspect the element in your browser and check if the animation there is a CSS(transition/animationFrame based or javascript (you will be able to see values in the style attribute change during the animation).
这篇关于angular 2动画vs css动画 - 什么时候使用什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
