Watcher for $animateCss (Angular 1.5)

animateCss.watcher.js

'use strict';

// for use of 100% CSS but still want that angular layer
// 
// assumes standard ngAnimate CSS class usage `ng-EVENT`
// 
// .animation-watcher {
    
//     /* this transition tells ngAnimate to make the animation happen */
//     transition-property: all;
//     transition-duration: 3s;
//     transition-timing-function: cubic-bezier(0.940, 0.460, 0.450, 0.250);

//     &.ng-enter-prepare {
//     }
//     &.ng-enter,
//     &.ng-leave.ng-leave-active {
//     }

//     &.ng-leave,
//     &.ng-enter.ng-enter-active {
//     }

// }


angular.module( 'animations.watcher', ['ngAnimate'] )
.animation( '.animation-watcher', [ '$animateCss', function( $animateCss ) {
    return {
        enter : function( element, done ) {
            var animation = $animateCss( element, {
                    event : 'enter',
                    cleanupStyles : true,
                    structural : true,
                    delay : true
                });

                console.log( 'animation-watcher enter start' );
            animation.start().done( function( res ) {
                console.log( 'animation-watcher enter done!', res );
                done();
            });
        },
        leave : function( element, done ) {
            // todo: if running, queue this next in line and wait for complete
            // 
            var animation = $animateCss( element, {
                    event : 'leave',
                    cleanupStyles : true, 
                    structural : true,
                    delay : true
                });

                console.log( 'animation-watcher leave start' );
            animation.start().done( function( res ) {
                console.log( 'animation-watcher leave done!', res );
                done();
            });
        }
    }
} ] );