Looking into the future with ngAnimate 2.0

Most of the procedures we have seen along this chapter inherit the animation logic already present in Angular 1.x, which was based on attaching CSS classes and relying on keyframe animations previously created in our style sheets. Unfortunately, this approach falls short when it comes to performance optimization, implementing concurrent animations or performing advanced interactions, like the ones proposed in Material Design, just to name a few shortcomings.

This is why the Angular team is now working on a new set of modules that will add an unparalleled layer of performance and abstraction through the use of a domain specific language (DSL) with full programmatic API. This project will take form in what is known as ngAnimate 2.0, and it will be released at some point later in 2016. The approach proposes a programmatic system that returns to JavaScript, tapping into CSS and allowing for programmatic control all around.

In a nutshell, some of the great improvements that ngAnimate 2.0 will feature are as follows:

  • Use an animation factory to create animations through a programmatic API with support for concurrent and sequential animations
  • Staggering animations handled 100 percent through JavaScript, bringing the same logic of CSS Keyframes animation to JavaScript, compounded by universal sequencing and animation chaining
  • Performance tuning with dramatically fewer reflows
  • Multi DOM-level animations and a sound control over CSS
  • Better event integration and full control over the animation flow, with the ability to fast-forward or reverse an animation interpolation programmatically
  • Solid support for Material Design and improved handling of user interaction events, mouse clicks, and so on
  • Adaptive styling
  • Full testability and support for animation asserts in our test specs

These and many more features will become available as soon as ngAnimate 2.0 is released. At the time of writing, the API is not public yet as ngAnimate 2.0 is a proof of concept, so providing a deeper coverage of its mechanism is out of the scope of this book. However, keep an eye on future announcements, since ngAnimate 2.0 will become an important milestone in the way animations are handled in JavaScript.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset