AngularJS 1.4 Completely Refactors Animation System

The AngularJS 1.4 release candidate has been announced, bringing a complete refactor of the internal animation code system.

With the 1.4 release, ngAnimate uses the new animation system to provide support for CSS-based animations as well as JavaScript-based animations via callback hooks.

Google's release notes for their JavaScript framework say that with the $animate feature "all of ngAnimate has been rewritten to make the internals of the animation code more flexible, reusable and performant."

Matias Niemelä, software engineer for Google, announced in a Google+ post "a variety of new features and bug fixes" for ngAnimate in 1.4.

These include:

• 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.

A number of breaking changes are also brought by $animate. Most notably, these include that JavaSript and CSS animations can no longer be run in parallel. Previously, with ngAnimate, both CSS and JS animations would be run together when multiple animations were detected.

However, although this feature has been removed in with 1.4, the AngularJS team note "the same effect, with even more possibilities, can be achieved by injecting $animateCss into a JavaScript-defined animation and creating custom CSS-based animations from there."

Breaking changes brought by $animate also include a flipping of function params for $animate.enabled() when an element is used -- allowing the function to act as a getter when a single element param is provided.

Another breaking changes from $animate includes "there is no need to call $scope.$apply or $scope.$digest inside of a animation promise callback, since the promise is resolved within a digest automatically (but a digest is not run unless the promise is chained)."

// < 1.4
$animate.enter(element).then(function() {
  $scope.$apply(function() {
    $scope.explode = true;
  });
});

// 1.4+
$animate.enter(element).then(function() {
  $scope.explode = true;
});

More details and other breaking changes can be found here.

The Angular 1.4 release, code named smooth-unwinding, also has several performance improvements, including ngOptions that only perform deep equality check on ngModel if using track by, and $rootScope that removes history event handler when app is torn down.

1.4 was originally slated for release by March 2015, in time for the AngularJS-focused conference ng-conf. Work on AngularJS 1.5 begins with the launch of 1.4. Brad Green, engineering director with Google and head of development for Angular, announced after ng-conf that the the theme of 1.5 will be supporting integration with Angular 2.

While there remains concern and confusion in the Angular community over the 2.0 release, Google have said they will continue to host Angular 1.X at angularjs.org, while the Alpha release of Angular 2.0 will be hosted at angular.io. Google also reassured the community at ng-conf that Angular 1.X will not end life until the majority of traffic has moved to 2.0.