ngRepeat Animation in eckig 1.4

Question

Ich bin dabei, eine Animation in Angular JS 1.4.0 zu erstellen, die ich der auf dieser Seite zu finden wäre (Angular 1.1.5): http://www.nganimate.org/angularjs/ng-repeat/move

Wie ich verstehe, gab es in den letzten Versionen größere Änderungen an ngAnimate.

Ich habe den wichtigen Teil meiner Anwendung mit Plunkr neu erstellt. Es kann hier gefunden werden http://plnkr.co/edit/9DK3LEAaGDgDT2kIILjG?p=preview

Ich möchte die Elemente, die anzeigen und verbergen, wegen einer anderen Filtereingabe, mit einer CSS-Animation animiert werden.

Das ist mein Filtereingang:

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

Und dies ist die Liste, in der alle Elemente aus der Suche eingestellt werden.

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

Hier sind meine CSS-Animationen:

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

Die Such- und Filter funktionieren, aber die CSS-Animationen werden nicht ausgelöst.

Ich wäre sehr froh, wenn jemand eine Lösung für dieses Problem hätte!

Answer 1

Die neueste Version wie eckig 1.4 ist der Ansatz etwas anders. Zuallererst solltest du eckige animierte js einschließen.

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

Dann sollten Sie 'ngAnimate' Modul wie folgt injizieren.

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

verwenden auch Klasse wie folgt in zusammen mit ng-reapeat

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

auch CSS für belebte wie unten

.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