Improve this Doc  View Source

$animate

  1. - $animateProvider
  2. - service in module ngAnimate

The $animate service provides animation detection support while performing DOM operations (enter, leave and move) as well as during addClass and removeClass operations. When any of these operations are run, the $animate service will examine any JavaScript-defined animations (which are defined by using the $animateProvider provider object) as well as any CSS-defined animations against the CSS classes present on the element once the DOM operation is run.

The $animate service is used behind the scenes with pre-existing directives and animation with these directives will work out of the box without any extra configuration.

Requires the ngAnimate module to be installed.

Please visit the ngAnimate module overview page learn more about how to use animations in your application.

Callback Promises

With AngularJS 1.3, each of the animation methods, on the $animate service, return a promise when called. The promise itself is then resolved once the animation has completed itself, has been cancelled or has been skipped due to animations being disabled. (Note that even if the animation is cancelled it will still call the resolve function of the animation.)

$animate.enter(element, container).then(function() {
  //...this is called once the animation is complete...
});

Also note that, due to the nature of the callback promise, if any Angular-specific code (like changing the scope, location of the page, etc...) is executed within the callback promise then be sure to wrap the code using $scope.$apply(...);

$animate.leave(element).then(function() {
  $scope.$apply(function() {
    $location.path('/new-page');
  });
});

An animation can also be cancelled by calling the $animate.cancel(promise) method with the provided promise that was returned when the animation was started.

var promise = $animate.addClass(element, 'super-long-animation');
promise.then(function() {
  //this will still be called even if cancelled
});

element.on('click', function() {
  //tooo lazy to wait for the animation to end
  $animate.cancel(promise);
});

(Keep in mind that the promise cancellation is unique to $animate since promises in general cannot be cancelled.)

Methods