Animating Custom Directives

The $animate service provides animation detection support while performing DOM operations (enter, leave and move) as well as during addClass and removeClass operations.

Animation with $animate service

var promise = $animate.leave($element);
promise.then(function() {
    // Execute after animation completes
});

Javascript Animation

<div class="list-item">Animate Me</div>

angular.module('app')
    .animation('.list-item', function() {
        return {
            enter : function(element, done) {
                // Animation code here
                done();
            }
        };
});

Animation Using 3rd Party Party library - animate.css

https://daneden.github.io/animate.css/

<span id="animationSandbox" class="animateMe">
    <h1 class="site__title mega">Animate.css</h1>
</span>

.animationSandbox.ng-leave-active{
    animation: bounceOut; // from animate.css
}