ngRepeat Animation in angular 1.4

Question

i am tying to achieve an Animation in Angular JS 1.4.0, which i'd like to be similar to the one, which can be found on this page (Angular 1.1.5): http://www.nganimate.org/angularjs/ng-repeat/move

As I understand, there have been major changes to ngAnimate over the last few Versions.

I have recreated the important Part of my application with Plunkr. It can be found here http://plnkr.co/edit/9DK3LEAaGDgDT2kIILjG?p=preview

I want the Items, that show and hide, because of a different filter input, to be animated with a css animation.

This is my filter input:

<input type="text" class="form-control" ng-model="search">

And this is the list, in which all the Elements from the search show up.

<ul>
    <li ng-class="item" ng-repeat="name in people | filter:search">
         <a href="#"> {{name.name}} </a>
    </li>
</ul>

Here are my CSS animations:

.item.ng-enter, 
.item.ng-leave
{ 
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: relative;
    display: block;
} 

.item.ng-enter.item.ng-enter-active, 
.item.ng-leave {
    opacity: 1;
    top: 0;
    height: 30px;
}

.item.ng-leave.item.ng-leave-active,
.item.ng-enter {
    opacity: 0;
    top: -50px;
    height: 0px;
}

The search and filters work fine, but the CSS animations are not triggered.

I would be very glad, if someone had a solution to this problem!

Kelwunn

I'm having this same issue, in 1.4 the classes for ng-enter, ng-leave etc. are not being added for ng-repeat. – Farad

Answer 1

The latest version like angular 1.4 the approach is bit different. First of all you should include angular animate js.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular-animate.js"></script>

Then you should inject 'ngAnimate' to module like this.

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

also use class like this in along with ng-reapeat

<li class="animate-repeat" ng-repeat="friend in friends | filter:q as results">

also use css for animate like below

    .animate-repeat {
  line-height:40px;
  list-style:none;
  box-sizing:border-box;
}

.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
  opacity:0;
  max-height:0;
}

.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
  opacity:1;
  max-height:40px;
}

more references

Bothy