NgRepeat Animation in angular 1.4

Question

I am attached to get an animation in Angular JS 1.4.0 that I would like to be like the one that is on this page (Angular 1.1.5): http://www.nganimate.org/angularjs/ng-repeat/ move

As I understand it, there have been significant changes to ngAnimate over the past few versions.

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

I want the elements that show and hide due to another filter input to be animated using css animation.

This is my input filter:

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

And this is a list that displays all the items from the search.

 <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; } 

Search and filters work fine, but CSS animations don't start.

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

Answer 1

In the latest version, such as angular 1.4, the approach is slightly 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 enter 'ngAnimate' into a module like this.

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

also use a class like this with ng-reapeat

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

also use css for animation as 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 links