Angular Animation
  • Introduction
  • Getting Started
    • Add Angular Animate
  • Animating Core Directives
    • CSS Transition
    • ng-class Add/Remove
    • ng-include Animation
    • ng-repeat Animation
    • ng-show/ng-hide Animation
    • Form Animation
    • ngMessages Animation
  • Animating Custom Directives
Powered by GitBook
On this page
  • Animation with $animate service
  • Javascript Animation
  • Animation Using 3rd Party Party library - animate.css

Was this helpful?

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

<span id="animationSandbox" class="animateMe">
    <h1 class="site__title mega">Animate.css</h1>
</span>
.animationSandbox.ng-leave-active{
    animation: bounceOut; // from animate.css
}
PreviousngMessages Animation

Last updated 5 years ago

Was this helpful?

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