Get the returned promise from $animateCss in angular 1.4

Question

How can I retrieve the promise from this animation from any location in my code?

angular.module('module', ['ngAnimate'])
    .animation('.notification', ['$animateCss', function($animateCss) {
        return {
            enter : function(element, done) {
                return $animateCss(element, {
                    // Animation options
                }
            }
        }
    );

The animation is triggered succesfully using something like an ng-if on a dom element.

<div class="notification" ng-if="notifier.active">...</div>

How can I get the promise without manually invoking the enter method?

Answer 1

Create a new promise and make it available immediately using the promise property in the returned object, but don't resolve it until you call the enter function and the animation is finished. More information here.

    var deferredAnimation = $q.defer();
    return {
        enter: function(element, done) {
            $animateCss(element, {
                // Animation options
            }).then(function() {
                deferredAnimation.resolve();
            });
        },
        promise: deferredAnimation.promise
    }

Answer 2

Have you tried?

var animation = $animateCss(element, {
    // Animation options
});
var promise = animation.start().getPromise();

-- EDIT --

Remember that if you want the JS animation to still function you need to do:

var animator = animation.start();
var promise = animator.getPromise();
return animator;

Answer 3

You could create a service:

animationServices.service('animationServices', function ($q){
      this.animateCss = function(){
         var deferred = $q.defer();
               $animateCss(element, {
               // Animation options
               deferred.resolve(whatever);
      }
      return deferred.promise;
    });

And then register your service and call it simply from wherever:

    animationServices.animateCss().then(function(data){

       //some code
    });