Menu
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?
486
CSS transitions are generally best for simple from-to movements, while CSS animations are for more complex series of movements. It's easy to confuse CSS transitions and animations because they let you do similar things. Here are just a few examples: You can visualize property changes.
TL;DR # Use CSS animations for simpler "one-shot" transitions, like toggling UI element states. Use JavaScript animations when you want to have advanced effects like bouncing, stop, pause, rewind, or slow down.
CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints.
The keyframes() function in Angular allows you to specify multiple interim styles within a single transition, with an optional offset to define the point in the animation where each style change should occur.
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).
181
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
