As of AngularJS 1.2, animation comes as a completely separate module in AngularJS—ngAnimate. Your initial files should appear as follows:

(style.css)

.animated-container {
  padding: 20px;
  border: 5px solid black;
}

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <label>
      <button ng-click="boxHidden=!boxHidden">
        Toggle Visibility
      </button>
    </label>
    <div class="animated-container" ng-hide="boxHidden">
      Awesome text!
    </div>
  </div>
</div>

(app.js)

angular.module('myApp', ['ngAnimate'])
.controller('Ctrl', function($scope) {
  $scope.boxHidden = true;
});

You can see that the given code simply provides a button that instantly toggles the visibility of the styled <div> element.

There are several ways to accomplish a fade in/out animation, but the simplest is to use CSS transitions as they integrate very nicely into the AngularJS animation class state machine.

The animation CSS classes need to cover both cases, where the element is hidden and needs to fade in, and where the element is shown and needs to fade out. As is the case with CSS transitions, you need to define the initial state, the final state, and the transition parameters. This can be done as follows:

(style.css)

.animated-container {
  padding: 20px;
  border: 5px solid black;
}
.animated-container.ng-hide-add, 
.animated-container.ng-hide-remove {
  transition: all linear 1s;
}
.animated-container.ng-hide-remove,
.animated-container.ng-hide-add.ng-hide-add-active {
  opacity: 0;
}
.animated-container.ng-hide-add,
.animated-container.ng-hide-remove.ng-hide-remove-active {
  opacity: 1;
}

These CSS classes cover the bi-directional transition to fade between opacity: 0 and opacity: 1 in 1 second. Clicking on the <button> element to toggle the visibility will work to trigger the fade in and fade out of the styled <div> element.

Since CSS transitions are triggered by the change of relevant CSS classes, using the AngularJS class state machine allows you to animate when a directive manipulates the DOM. The show/hide state machine is cyclical and operates as shown in the following table (this is a simplified version of the full ng-show/ng-hide state machine, which is provided in detail in the Creating addClass animations with ngShow recipe):

You can now see how the CSS classes utilize the animation class state machine to trigger the animation. When the directive state changes (in this case, the Boolean is negated), AngularJS applies sequential CSS classes to the element, intending them to be used as anchors for a CSS animation. Here, Time quanta elapses refers to the separate addition of ng-hide-add or ng-hide-remove followed by the ng-hide-add-active or ng-hide-remove-active classes. These classes are added sequentially and separately (this appears to be instantaneous, you will be unable to see the separation when watching the classes in a browser inspector), but the nature of the offset addition causes the CSS transition to be triggered properly.

In the case of moving from hidden to visible, the CSS styling defines a transition between the .animated-container.ng-hide-add selector and the .animated-container.ng-hide-add.ng-hide-add-active selector, with the transition definition attached under the .animated-container.ng-hide-remove selector.

In the case of moving from visible to hidden, the styling defines the opposite transition between the .animated-container.ng-hide-add selector and the .animated-container.ng-hide-add.ng-hide-add-active selector, with the transition definition attached under the .animated-container.ng-hide-add selector.

As the class state machine is controlled entirely by the ng-hide directive, if you want to invert the animation (initially start as shown and then make the transition to hidden), all that is needed is the use of ng-show on the HTML element instead of ng-hide. These opposing directives will implement the class state machine appropriately for their definition, but will always use the ng-hide class as the default reference. In other words, using the ng-show directive will not utilize ng-show-add or ng-show-remove or anything of the sort; it will still be ng-hide, ng-hide-add or ng-hide-remove, and ng-hide-add-active or ng-hide-remove-active.

(style.css)

[ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

(index.html)
...
<div class="animated-container" ng-show="boxHidden" ng-cloak>
  Awesome text!
</div>

Suppose that you want to slide a <div> element up and down in the following setup:

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <button ng-click="displayToggle=!displayToggle">
      Toggle Visibility
    </button>
    <div>Slide me up and down!</div>
  </div>   
</div>

(app.js)
angular.module('myApp', ['ngAnimate'])
.controller('Ctrl', function($scope) {
  $scope.displayToggle = true;
});

A sliding animation requires truncation of the overflowing element and a transition involving the height of the element. The following implementation utilizes ng-class:

(style.css)

.container {
  overflow: hidden;
}
.slide-tile {
  transition: all 0.5s ease-in-out;
  width: 300px;
  line-height: 300px;
  text-align: center;
  border: 1px solid black;
  transform: translateY(0);
}
.slide-up {
  transform: translateY(-100%);
}

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <button ng-click="displayToggle=!displayToggle">
      Toggle Visibility
    </button>
    <div class="container">
      <div class="slide-tile" 
         ng-class="{'slide-up': !displayToggle}">
        Slide me up and down!
      </div>
    </div>
  </div>
</div>

A slightly more lightweight implementation is to tie the class definitions into the ng-show state machine:

(style.css)

.container {
  overflow: hidden;
}
.slide-tile {
  transition: all 0.5s ease-in-out;
  width: 300px;
  line-height: 300px;
  text-align: center;
  border: 1px solid black;
  transform: translateY(0);
}
.slide-tile.ng-hide {
  transform: translateY(-100%);
}

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <button ng-click="displayToggle=!displayToggle">
      Toggle Visibility
    </button>
    <div class="container">
      <div class="slide-tile" ng-show="displayToggle">
        Slide me up and down!
      </div>
    </div>
  </div>   
</div>

CSS transitions afford the convenience of a bi-directional animation as long as the endpoints and transitions are defined. For both of these implementations, the translateY CSS property is used to implement the sliding, and the hidden state (slide up for the ng-class implementation, and ng-hide for the ng-show implementation) is used as the concealed transition state endpoint.

Suppose that you want to attach a fade-in animation to a piece of the DOM that has a ng-if directive attached to it. When the ng-if expression evaluates to true, the enter animation will trigger, as the template is brought into the page.

The initial setup, before animation is implemented, can be structured as follows:

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <button ng-click="visible=!visible">Toggle</button>
    <span class="target" ng-if="visible">Bring me in!</span>
  </div>   
</div>

(app.js)

angular.module('myApp', ['ngAnimate'])
.controller('Ctrl', function($scope) {
  $scope.visible = true;
});

When the button is clicked, this code instantaneously brings the <div> element with a ngIf expression attached to it into view as soon as the expression evaluates to true. However, with the inclusion of the ngAnimate module, AngularJS will add in animation hooks, upon which you can define an animation when the <div> element enters the page.

An animation can be defined by a CSS transition, CSS animation, or by JavaScript. The animation definition can be constructed in different ways. CSS transitions and CSS animations will use the ng-enter CSS class hooks to define the animation, whereas JavaScript animations will use the ngAnimate module's enter() method.

(style.css)

.target.ng-enter
{
  transition: all linear 1s;
  opacity: 0;
}
.target.ng-enter.ng-enter-active {
  opacity: 1;
}

(style.css)

.target.ng-enter {
  animation: 1s target-enter;
}
@keyframes target-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

(app.js)

angular.module('myApp', ['ngAnimate'])
.controller('Ctrl', function ($scope) {
  $scope.visible = false;
})
.animation('.target', function () {
  return {
    enter: function (element, done) {
      $(element)
      .css({
        'opacity': 0
      });
      $(element)
      .animate({
        'opacity': 1
      },
      1000,
      done);
    }
  };
});

The enter animation behaves as a state machine. It cannot assume that either CSS transitions/animations or JavaScript animations are defined upon the <div> DOM element, and it must be able to apply all of them without creating conflicts. As a result, AngularJS will trigger the JavaScript animations and immediately begin the progression of the animation class sequence, which will trigger any CSS transitions/animations that might be defined upon them. In this way, both JavaScript and CSS animations can be used on the same DOM element simultaneously.

AngularJS uses a standard class naming convention for different states, which allows you to uniquely define each set of animations for the component being animated. The following set of tables define how the enter animation state machine operates.

The initial state of the animation components is defined as follows:

[<span class="target" ng-if="visible">
  Bring me in!
</span>,
<!-- end ngIf: visible -->]

[<div>
  ...
</div>]

[<!-- ngIf: visible -->]

The following table represents a full enter animation transition:

<div>
  <!-- ngIf: visible -->
</div>

<div>
  <!-- ngIf: visible -->
  <span class="target" 
        ng-if="visible">
    Bring me in!
  </span>
  <!-- end ngIf: visible -->
</div>

<div>
  <!-- ngIf: visible -->
  <span class="target ng-animate" 
        ng-if="visible">
    Bring me in!
  </span>
  <!-- end ngIf: visible -->
</div>

<div>
  <!-- ngIf: visible -->
  <span class="target ng-animate ng-enter" 
        ng-if="visible">
    Bring me in!
  </span>
  <!-- end ngIf: visible -->
</div>

<div>
  <!-- ngIf: visible -->
  <span class="target ng-animate ng-enter ng-enter-active" 
        ng-if="visible">
    Bring me in!
  </span>
  <!-- end ngIf: visible -->
</div>

<div>
  <!-- ngIf: visible -->
  <span class="target" 
        ng-if="visible">
    Bring me in!
  </span>
  <!-- end ngIf: visible -->
</div>

JavaScript and CSS transitions/animations are executed in a parallel. Since they are defined independently, they can be run independently even though they can modify the same DOM element(s) entering the page.

Suppose that you want to attach a slide-in or slide-out animation to a piece of the DOM that exists inside the ng-view directive. Route changes that cause the content of ng-view to be altered will trigger an enter animation for the content about to be brought into the page, as well as trigger a leave animation for the content about to leave the page.

The initial setup, before animation is implemented, can be structured as follows:

(style.css)

.link-container {
  position: absolute;
  top: 320px;
}
.animate-container {
  position: absolute;
}
.animate-container div {
  width: 300px;
  text-align: center;
  line-height: 300px;
  border: 1px solid black;
}

(index.html)

<div ng-app="myApp">
  <ng-view class="animate-container"></ng-view>
  <div class="link-container"> 
    <a href="#/foo">Foo</a>
    <a href="#/bar">Bar</a>
  </div>
  
  <script type="text/ng-template" id="foo.html">
    <div>
      <span>Foo</span>
    </div>
  </script>
  <script type="text/ng-template" id="bar.html">
    <div>
      <span>Bar</span>
    </div>
  </script>
</div>

(app.js)

angular.module('myApp', ['ngAnimate', 'ngRoute'])
.config(function ($routeProvider) {
  $routeProvider
  .when('/bar', {
    templateUrl: 'bar.html'
  })
  .otherwise({
    templateUrl: 'foo.html'
  });
});

When the route changes, AngularJS instantaneously injects the appropriate template into the ng-view directive. However, with the inclusion of the ngAnimate module, AngularJS will add in animation hooks, upon which you can define animations for how the templates will enter and leave the page.

An animation can be defined by a CSS transition, CSS animation, or by JavaScript. The animation definition can be constructed in different ways. CSS transitions and CSS animations will use the ng-leave CSS class hooks to define the animation, whereas JavaScript animations will use the ngAnimate directive's leave() method.

It is important to note here that ng-view triggers the leave and enter animations simultaneously. Therefore, your animation definitions must take this into account in order to prevent animation conflicts.

(style.css)

.animate-container.ng-enter {
  /* final value is the transition delay */
  transition: all 0.5s 0.5s;
}
.animate-container.ng-leave {
  transition: all 0.5s;
}
.animate-container.ng-enter, 
.animate-container.ng-leave.ng-leave-active {
  top: -300px;
}
.animate-container.ng-leave, 
.animate-container.ng-enter.ng-enter-active {
  top: 0px;
}

(style.css)

.animate-container.ng-enter {
  animation: 1s view-enter;
}
.animate-container.ng-leave {
  animation: 0.5s view-leave;
}
@keyframes view-enter {
  0%, 50% {
    top: -300px;
  }
  100% {
    top: 0px;
  }
}
@keyframes view-leave {
  0% {
    top: 0px;
  }
  100% {
    top: -300px;
  }
}

(app.js)

angular.module('myApp', ['ngAnimate', 'ngRoute'])
.config(function ($routeProvider) {
  $routeProvider
  .when('/bar', {
    templateUrl: 'bar.html'
  })
  .otherwise({
    templateUrl: 'foo.html'
  });
})
.animation('.animate-container', function() {
  return {
    enter: function(element, done) {
      $(element)
      .css({
        'top': '-300px'
      });
      $(element)
      .delay(500)
      .animate({
        'top': '0px'
      }, 500, done);
    },
    leave: function(element, done) {
      $(element)
      .css({
        'top': '0px'
      });
      $(element)
      .animate({
        'top': '-300px'
      }, 500, done);
    }
  };
});

The leave animation state machine has a good deal of parity with the enter animation. State machine class progressions work in a very similar way; sequentially adding the beginning and final animation hook classes in order to match the element coming in and out of existence. AngularJS uses the same standard class naming convention used by the enter animation for the different animation states. The following set of tables define how the leave animation state machine operates.

The initial state of the animation components is defined as follows:

[<ng-view class="animate-container">
  <div>
    <span>Bar</span>
  </div>
</ng-view>]

The following table represents a full leave animation transition:

<ng-view class="animate-container">
  <div>
    <span>Bar</span>
  </div>
</ng-view>

<ng-view class="animate-container ng-animate">
  <div>
    <span>Bar</span>
  </div>
</ng-view>

<ng-view class="animate-container ng-animate ng-leave">
  <div>
    <span>Bar</span>
  </div>
</ng-view>

<ng-view class="animate-container ng-animate ng-leave ng-leave-active">
  <div>
    <span>Bar</span>
  </div>
</ng-view>

<ng-view class="animate-container">
  <div>
    <span>Bar</span>
  </div>
</ng-view>

<ng-view class="animate-container">
</ng-view>

Suppose that you want to attach a slide-in or slide-out animation to a piece of the DOM that exists inside the ng-view directive. Route changes that cause the content of ng-view to be altered will trigger an enter animation for the content about to be brought into the page, as well as trigger a leave animation for the content about to leave the page.

Suppose that you want to animate individual pieces of a list when they are initially added, moved, or removed. Additions and removals should slide in and out from the left-hand side, and move events should slide up and down.

The initial setup, before animation is implemented, can be structured as follows:

(style.css)

.animate-container {
  position: relative;
  margin-bottom: -1px;
  width: 300px;
  text-align: center;
  border: 1px solid black;
  line-height: 40px;
}
.repeat-container {
  position: absolute;
}

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <div style="repeat-container">
      <input ng-model="search.val" />
      <button ng-click="shuffle()">Shuffle</button>
      <div ng-repeat="el in arr | filter:search.val" 
           class="animate-container">
        <span>{{ el }}</span>
      </div>
    </div>    
  </div>
</div>

(app.js)

angular.module('myApp', ['ngAnimate'])
.controller('Ctrl', function($scope) {
  $scope.arr = [10,15,25,40,45];
  
  // implementation of Knuth in-place shuffle
  function knuthShuffle(a) {
    for(var i = a.length, j, k; i; 
      j = Math.floor(Math.random() * i),
      k = a[--i], 
      a[i] = a[j], 
      a[j] = k);    
    return a;
  }
  
  $scope.shuffle = function() {
    $scope.arr = knuthShuffle($scope.arr);
  };
});

When the order of the displayed iterable collection changes, AngularJS injects the appropriate template into the corresponding location in the list, and sibling elements whose indices have changed will instantaneously shift. However, with the inclusion of the ngAnimate module, AngularJS will add in animation hooks, upon which you can define animations for how the templates will move within the list.

The animation can be defined by a CSS transition, CSS animation, or by JavaScript. The animation definition can be constructed in different ways. CSS transitions and CSS animations will use the ng-move CSS class hooks in order to define the animation, whereas JavaScript animations will use the ngAnimate module's move() method.

It is important to note here that ng-repeat triggers enter, leave, and move animations simultaneously. Therefore, your animation definitions must take this into account to prevent animation conflicts.

(style.css)

.animate-container.ng-move {
  transition: all 1s;
  opacity: 0;
  max-height: 0;
}
.animate-container.ng-move-active {
  opacity: 1;
  max-height: 40px;
}
.animate-container.ng-enter {
  transition: left 0.5s, max-height 1s;
  left: -300px;
  max-height: 0;
}
.animate-container.ng-enter-active {
  left: 0px;
  max-height: 40px;
}
.animate-container.ng-leave {
  transition: left 0.5s, max-height 1s;
  left: 0px;
  max-height: 40px;
}
.animate-container.ng-leave-active {
  left: -300px;
  max-height: 0;
}

(style.css)

.animate-container.ng-enter {
  animation: 0.5s item-enter;
}
.animate-container.ng-leave {
  animation: 0.5s item-leave;
}
.animate-container.ng-move {
  animation: 0.5s item-move;
}
@keyframes item-enter {
  0% {
    max-height: 0;
    left: -300px;
  }
  50% {
    max-height: 40px;
    left: -300px;
  }
  100% {
    max-height: 40px;
    left: 0px;
  }
}
@keyframes item-leave {
  0% {
    left: 0px;
    max-height: 40px;
  }
  50% {
    left: -300px;
    max-height: 40px;
  }
  100% {
    left: -300px;
    max-height: 0;
  }
}
@keyframes item-move {
  0% {
    opacity: 0;
    max-height: 0px;
  }
  100% {
    opacity: 1;
    max-height: 40px;
  }
}

(app.js)

angular.module('myApp', ['ngAnimate'])
.controller('Ctrl', function($scope) {
  ...
})
.animation('.animate-container', function() {
  return {
    enter: function(element, done) {
      $(element)
      .css({
        'left': '-300px',
        'max-height': '0'
      });
      $(element)
      .animate({
        'max-height': '40px'
      }, 250)
      .animate({
        'left': '0px'
      }, 250, done);
    },
    leave: function(element, done) {
      $(element)
      .css({
        'left': '0px',
        'max-height': '40px'
      });
      $(element)
      .animate({
        'left': '-300px'
      }, 250)
      .animate({
        'max-height': '0'
      }, 250, done);
    },
    move: function(element, done) {
      $(element)
      .css({
        'opacity': '0',
        'max-height': '0'
      });
      $(element)
      .animate({
        'opacity': '1',
        'max-height': '40px'
      }, 500, done);
    }
  };
});

The move animation state machine is very similar to the enter animation. State machine class progressions sequentially add the beginning and final animation hook classes in order to match the element that is being reintroduced into the list at its new index. AngularJS uses the same standard class naming convention used by the enter animation for different animation states.

The following set of tables define how the move animation state machine operates.

The initial state of the animation components is defined as follows:

[<div ng-repeat="el in arr" 
      class="animate-container">
  <span>1</span>
</div>,
<!-- end ngRepeat: el in arr -->]

[<!-- ngRepeat: el in arr -->]

The following table represents a full move animation transition:

<!-- ngRepeat: el in arr -->
<div ng-repeat="el in arr" 
     class="animate-container">
  <span>1</span>
</div>
<!-- end ngRepeat: el in arr -->
<div ng-repeat="el in arr " 
     class="animate-container">
  <span>2</span>
</div>
<!-- end ngRepeat: el in arr -->

<!-- ngRepeat: el in arr -->
<div ng-repeat="el in arr" 
     class="animate-container">
  <span>2</span>
</div>
<!-- end ngRepeat: el in arr -->
<div ng-repeat="el in arr " 
     class="animate-container">
  <span>1</span>
</div>
<!-- end ngRepeat: el in arr -->

<!-- ngRepeat: el in arr -->
<div ng-repeat="el in arr " 
     class="animate-container ng-animate">
  <span>2</span>
</div>
<!-- end ngRepeat: el in arr -->
<div ng-repeat="el in arr " 
     class="animate-container">
  <span>1</span>
</div>
<!-- end ngRepeat: el in arr -->

<!-- ngRepeat: el in arr -->
<div ng-repeat="el in arr" 
     class="animate-container ng-animate ng-move">
  <span>2</span>
</div>
<!-- end ngRepeat: el in arr -->
<div ng-repeat="el in arr " 
     class="animate-container">
  <span>1</span>
</div>
<!-- end ngRepeat: el in arr -->

<!-- ngRepeat: el in arr -->
<div ng-repeat="el in arr" 
     class="animate-container ng-animate ng-move ng-move-active">
  <span>2</span>
</div>
<!-- end ngRepeat: el in arr -->
<div ng-repeat="el in arr " 
     class="animate-container">
  <span>1</span>
</div>
<!-- end ngRepeat: el in arr -->

<!-- ngRepeat: el in arr -->
<div ng-repeat="el in arr" 
     class="animate-container">
  <span>2</span>
</div>
<!-- end ngRepeat: el in arr -->
<div ng-repeat="el in arr " 
     class="animate-container">
  <span>1</span>
</div>
<!-- end ngRepeat: el in arr -->

The move animation's name can be a bit confusing as move implies a starting and ending location. A better way to think of it is as a secondary entrance animation used in order to demonstrate when new content is not being added to the list. You will notice that the move animation is triggered simultaneously for all the elements whose relative order in the list has changed, and that the animation triggers when it is in its new position.

Also note that even though the index of both elements changed, only one move animation was triggered. This is due to the way the movement within an enumerable collection is defined. AngularJS preserves the old ordering of the collection and compares its values in order to the entire new ordering, and all mismatches will fire move events. For example, if the old order is 1, 2, 3, 4, 5 and the new order is 5, 4, 2, 1, 3, then the comparison strategy works as follows:

old[0] == new[0]

old[0] == new[1]

old[0] == new[2]

old[0] == new[3]

old[2] == new[4]

Suppose that you want to attach a fade-out animation to a piece of the DOM that has an ng-show directive. Remember that ng-show does not add or remove anything from the DOM; it merely toggles the CSS display property to set the visibility.

The initial setup, before animation is implemented, can be structured as follows:

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <button ng-click="displayToggle=!displayToggle">
      Toggle Visibility
    </button>
    <div class="animate-container" ng-show="displayToggle">
      Fade me out!
    </div>
  </div>
</div>

(app.js)

angular.module('myApp', ['ngAnimate'])
.controller('Ctrl',function($scope) {
  $scope.displayToggle = true;
});

When the ng-show expression evaluates to false, the DOM element is immediately hidden. However, with the inclusion of the ngAnimate module, AngularJS will add in animation hooks, upon which you can define animations for how the element will be removed from the page.

The animation can be defined by a CSS transition, CSS animation, or by JavaScript. The animation definition can be constructed in different ways. CSS transitions and CSS animations will use the addClass CSS class hooks to define the animation, whereas JavaScript animations will use the ngAnimate directive's addClass() method.

(style.css)

.animate-container.ng-hide-add {
  transition: all linear 1s;
  opacity: 1;
}
.animate-container.ng-hide-add.ng-hide-add-active {
  opacity: 0;
}

(style.css)

.animate-container.ng-hide-add {
  animation: 1s fade-out;
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

(app.js)

angular.module('myApp', ['ngAnimate'])
.controller('Ctrl', function($scope) {
  $scope.displayToggle = true;
})
.animation('.animate-container', function() {
  return {
    addClass: function(element, className, done) {
      if (className==='ng-hide') {
        $(element)
        .removeClass('ng-hide')
        .css('opacity', 1)
        .animate(
          {'opacity': 0}, 
          1000, 
          function() {
            $(element)
            .addClass('ng-hide')
            .css('opacity', 1);
            done();
          }
        );
      } else {
        done();
      }
    }
  };
});

Independent of what is defined in the actual class that is being added, ngAnimate provides animation hooks for the class that is being added to define animations. In the context of the ng-show directive, the ng-hide CSS class is defined implicitly within AngularJS, but the animation hooks are completely decoupled from the original class in order to provide a fresh animation definition interface. The following set of tables defines how the addClass animation state machine operates.

The initial state of the animation components is defined as follows:

<div class="animate-container" 
     ng-show="displayToggle">
  Fade me out!
</div>

'ng-hide'

The following table represents a full addClass animation transition:

<div class="animate-container" 
     ng-show="displayToggle">
  Fade me out!
</div>

<div class="animate-container ng-animate" 
     ng-show="displayToggle">
  Fade me out!
</div>

<div class="animate-container ng-animate ng-hide-add" 
     ng-show="displayToggle">
  Fade me out!
</div>

<div class="animate-container ng-animate ng-hide ng-hide-add ng-hide-add-active" 
     ng-show="displayToggle">
  Fade me out!
</div>

<div class="animate-container ng-hide" 
     ng-show="displayToggle">
  Fade me out!
</div>

Suppose that you want to have a div element slide out of the view when a class is removed. Remember that ng-class does not add or remove any elements from the DOM; it merely adds or removes the classes defined within the directive expression.

The initial setup, before animation is implemented, can be structured as follows:

(style.css)

.container {
  background-color: black;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.prompt {
  position: absolute;
  margin: 10px;
  font-family: courier;
  color: lime;
}
.cover {
  position: relative;
  width: 200px;
  height: 200px;
  left: 200px;
  background-color: black;
}
.blackout {
  left: 0;
}

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <button ng-click="displayToggle=!displayToggle">
      Toggle Visibility
    </button>
    <div class="container">
      <span class="prompt">Wake up, Neo...</span>
      <div class="cover" 
         ng-class="{blackout: displayToggle}">
      </div>
    </div>
  </div>
</div>

(app.js)

angular.module('myApp', ['ngAnimate'])
.controller('Ctrl', function($scope) {
  $scope.displayToggle = true;
});

When the ng-class value for blackout evaluates to false, it will immediately be stripped out. However, with the inclusion of the ngAnimate module, AngularJS will add in animation hooks, upon which you can define animations for how the class will be removed.

The animation can be defined by a CSS transition, CSS animation, or by JavaScript. The animation definition can be constructed in different ways. CSS transitions and CSS animations will use the removeClass CSS class hooks to define the animation, whereas JavaScript animations will use the ngAnimate directive's removeClass() method.

(style.css)

.blackout-remove {
  left: 0;
}
.blackout-remove {
  transition: all 3s;
}
.blackout-remove-active {
  left: 200px;
}

(style.css)

.blackout-remove {
  animation: 1s slide-out;
}
@keyframes slide-out {
  0% {
    left: 0;
  }
  100% {
    left: 200px;
  }
}

(app.js)

angular.module('myApp', ['ngAnimate'])
.controller('Ctrl', function($scope) {
  $scope.displayToggle = true;
})
.animation('.blackout', function() {
  return {
    removeClass: function(element, className, done){
      if (className==='blackout') {
        $(element)
        .removeClass('blackout')
        .css('left', 0)
        .animate(
          {'left': '200px'}, 
          3000, 
          function() {
            $(element).css('left','');
            done();
          } 
        );
      } else {
        done();
      }
    }
  };
});

The ngAnimate directive provides animation hooks for the class that is being removed in order to define animations independent of the actual class. In the context of this ng-class directive implementation, the blackout CSS class is defined explicitly, and the animation hooks build on top of this class name. The following set of tables defines how the removeClass animation state machine operates.

The animation components are defined as follows:

<div class="cover blackout" 
     ng-class="{blackout: displayToggle}">
</div>

'blackout'

The following table represents a full removeClass animation transition:

<div class="cover blackout" 
     ng-class="{blackout: displayToggle}">
</div>

<div class="cover blackout ng-animate" 
     ng-class="{blackout: displayToggle}">
</div>

<div class="cover blackout ng-animate blackout-remove"
     ng-class="{blackout: displayToggle}">
</div>

<div class="cover ng-animate 
  blackout-remove blackout-remove-active" 
     ng-class="{blackout: displayToggle}">
</div>

<div class="cover" 
     ng-class="{blackout: displayToggle}">
</div>

Suppose that you have an animated ng-repeat implementation, as follows:

(style.css)

.container {
  line-height: 30px;
}
.container.ng-enter,
.container.ng-leave,
.container.ng-move {
  transition: all linear 0.2s;
  
}
.container.ng-enter,
.container.ng-leave.ng-leave-active,
.container.ng-move {
  opacity: 0;
  max-height: 0;
}
.container.ng-enter.ng-enter-active,
.container.ng-leave,
.container.ng-move.ng-move-active {
  opacity: 1;
  max-height: 30px;
}

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <input ng-model="search" />
    <div ng-repeat="name in names | filter:search"
         class="container">
      {{ name }}
    </div>
  </div>
</div>

(app.js)

angular.module('myApp', ['ngAnimate'])
.controller('Ctrl', function($scope) {
  $scope.names = [
    'Jake',
    'Henry',
    'Roger',
    'Joe',
    'Robert',
    'John'
  ];
});

Since the animation is accomplished through the use of CSS transitions, you can tap into the CSS class staggering that is afforded to you by adding the following to the style sheet:

(style.css)

.container.ng-enter-stagger,
.container.ng-leave-stagger,
.container.ng-move-stagger {
  transition-delay: 0.2s;
  transition-duration: 0;
}

For the example dataset, filtering with J will cause multiple elements to be removed, as well as multiple elements to change their index. All of these changes correspond to an animation event. Since these animations occur simultaneously, AngularJS can take advantage of the fact that animations are queued up and executed in batches within a single reflow to compensate for the fact that reflows are computationally expensive.

The -stagger classes essentially act as shims for successive animations. Instead of running all the animations in parallel, they are run serially, delimited by the additional stagger transition.

It is also possible to stagger animations using keyframes. This can be accomplished as follows:

(style.css)

.container.ng-enter-stagger,
.container.ng-leave-stagger,
.container.ng-move-stagger {
  animation-delay: 0.2s;
  animation-duration: 0;
}
.container.ng-leave {
  animation: 0.5s repeat-leave;
}
.container.ng-enter {
  animation: 0.5s repeat-enter;
}
.container.ng-move {
  animation: 0.5s repeat-move;
}
@keyframes repeat-enter {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 30px;
  }
}
@keyframes repeat-leave {
  from {
    opacity: 1;
    max-height: 30px;
  }
  to {
    opacity: 0;
    max-height: 0;
  }
}
@keyframes repeat-move {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 30px;
  }
}