How can I animate the movement of remaining ng-repeat items when one is removed?

Question

I have a dynamic list of items using ng-repeat. When something happens an item may disappear. I have handled smoothly animating the removal of these items using ng-animate, but after they are gone, the remaining items simply snap to their new position. How can I animate this movement smoothly?

I've tried applying an "all" transition to the repeated class and using ng-move with no success.

Answer 1

You can achieve this by animating the max-height property. Check out this sample:

http://jsfiddle.net/k4sR3/8/

You will need to pick a sufficiently high value for max-height (in my sample, I used 90px). When an item is initially being added, you want it to start off with 0 height (I'm also animating left to have the item slide in from the left, as well as opacity, but you can remove these if they don't jibe with what you're doing):

.repeated-item.ng-enter {
    -webkit-transition:0.5s linear all;
    -moz-transition:0.5s linear all;
    -o-transition:0.5s linear all;
    transition:0.5s linear all;
    max-height: 0;
    opacity: 0;
    left: -50px;
}

Then, you set the final values for these properties in the ng-enter-active rule:

.repeated-item.ng-enter.ng-enter-active {
    max-height: 90px;
    opacity: 1;
    left: 0;
}

Item removal is a bit trickier, as you will need to use keyframe-based animations. Again, you want to animate max-height, but this time you want to start off at 90px and decrease it down to 0. As the animation runs, the item will shrink, and all the following items will slide up smoothly.

First, define the animation that you will be using:

@keyframes my_animation {
  from {
    max-height: 90px;
    opacity: 1;
    left: 0;
  }
  to {
    max-height: 0;
    opacity: 0;
    left: -50px;
  }
}

(For brevity, I'm omitting the vendor-specific definitions here, @-webkit-keyframes, @-moz-keyframes, etc - check out the jsfiddle above for the full sample.)

Then, declare that you will be using this animation for ng-leave as follows:

.repeated-item.ng-leave {
  -webkit-animation:0.5s my_animation;
  -moz-animation:0.5s my_animation;
  -o-animation:0.5s my_animation;
  animation:0.5s my_animation;
}

---

Basics

In case anyone is struggling with figuring out how to get AngularJS animations to work at all, here's an abbreviated guide.

First, to enable animation support, you will need to include an additional file, angular-animate.js, after you load up angular.js. E.g.:

<script type="text/javascript" src="angular-1.2/angular.js"></script>
<script type="text/javascript" src="angular-1.2/angular-animate.js"></script>

Next, you will need to load ngAnimate by adding it to the list of your module's dependencies (in the 2nd parameter):

var myApp = angular.module('myApp', ['ngAnimate']);

Then, assign a class to your ng-repeat item. You will be using this class name to assign the animations. In my sample, I used repeated-item as the name:

<li ng-repeat="item in items" class="repeated-item">

Then, you define your animations in the CSS using the repeated-item class, as well as the special classes ng-enter, ng-leave, and ng-move that Angular adds to the item when it is being added, removed, or moved around.

The official documentation for AngularJS animations is here:

http://docs.angularjs.org/guide/animations