angular 2 animation vs css animation - when to use what?
I'm currently trying out angular2's animation and I was wondering what specific advantage they bring over standard css animations/transitions.
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?
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?
Answer
The question is actually more javascript animation vs css animation (because angular2's animations are based on javascript-animation).
The answer is that when you can - use CSS animation.
Modern browsers uses different thread for CSS animation, so the javascript-thread is not affected by the CSS animations.
You can use the HTML5 Animation Speed Test to check the preformance of different frameworks (javscript-based) VS CSS animation in your browser.
In general:
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.
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).