Codename: Smooth Unwinding

AngularJS 1.4 RC is out with new animation system

Natali Vlatko
Staircase image via Shutterstock

In the lead up to the release of Angular2, the release candidate for AngularJS 1.4 brings a complete rewrite of the internal animation code system, with breaking changes to boot. Various bugfixes round out the release.

After already detailing what to expect for AngularJS 1.4, the release candidate is now out and with it, a complete rewrite of the ngAnimate system. Announced via the codename “Smooth Unwinding“, software engineer Matias Niemelä details the changes on Google+.

Along with various fixes for ngAria, ngTouch and core services like $http and $compile, the complete refactoring of the internal animation code has already produced some initial excitement.

The rewrite has come about to “make the internals of the animation code more flexible, reusable and performant”. This flexibility and performance is reflected in the following features:

  • The ability to imperatively control/trigger CSS-based transitions/keyframes using $animateCss
  • The ability to cross-animate elements across pages (using ng-animate-ref)
  • A new API for handling callbacks via $animate
  • A bunch of fixes to reflow-related bugs and a better foundation for more features later to come in 1.5

Like I said, people are excited:

A decent amount of breaking changes are also tagging along with $animate. First and foremost, JavaSript and CSS animations can no longer be run in parallel. While earlier versions of ngAnimate allowed this, the Angular team state that the same effect can be achieved by injecting $animateCss into a JavaScript-defined animation and creating custom CSS-based animations from there.

Even more possibilities are available with the above injection. Punters are encouraged to read the ngAnimate documentation for more information.

Adding to the breaking changes list is the function parameters for $animate.enabled() when an element is used are now flipped. This fix allows the function to act as a getter when a single element parameter is provided.

In addition to disabling the children of the element, $animate.enabled(element, false) will now also disable animations on the element itself. There’s also the change making animation-related callbacks now firing on $animate.on instead of directly being on the element, like so:

// < 1.4
element.on('$animate:before', function(e, data) {
  if (data.event === 'enter') { ... }
});'$animate:before', fn);

// 1.4+
$animate.on(element, 'enter', function(data) {
$, 'enter', fn);

A couple more breaking changes have made their way into this release, which can be viewed in further detail on GitHub. Close to 10,000 lines of changes have been made, with Niemelä calling it a “monster of a feature”.

As with any release candidate, small fixes are still expected to be made. Niemelä demo’ed the new features at this year’s ng-conf, which you can feast your eyes on here.

Natali Vlatko
An Australian who calls Berlin home, via a two year love affair with Singapore. Natali was an Editorial Assistant for (S&S Media Group).

Inline Feedbacks
View all comments