ngRipeat Animazione angolare 1.4

Question

Mi sto legando per realizzare un'animazione in Angular JS 1.4.0, che mi piacerebbe essere simile a quella, che può essere trovata in questa pagina (Angular 1.1.5): http://www.nganimate.org/angularjs/ng-repeat/move

Come ho capito, ci sono stati importanti cambiamenti a ngAnimate nelle ultime versioni.

Ho ricreato l'importante parte della mia applicazione con Plunkr. Può essere trovato qui http://plnkr.co/edit/9DK3LEAaGDgDT2kIILjG?p=preview

Desidero che gli elementi, che mostrano e nascondano, a causa di un filtro diverso, siano animati con un'animazione css.

Questo è il mio ingresso filtro:

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

E questa è la lista, in cui tutti gli elementi della ricerca visualizzati.

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

Qui sono le mie animazioni CSS:

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

La ricerca e filtri funzionano bene, ma le animazioni CSS non vengono attivati.

Sarei molto contento, se qualcuno avesse una soluzione a questo problema!

Answer 1

L'ultima versione come angolare 1.4 l'approccio è leggermente diverso. Prima di tutto dovresti includere animazioni angolari js.

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

Quindi si deve iniettare 'ngAnimate' su un modulo come questo.

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

usare anche classe come questa in lungo con ng-reapeat

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

usare anche CSS per animare come qui di seguito

.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