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/movengRepeat Animation in eckig 1.4
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!
Ich habe das gleiche Problem In 1.4 werden die Klassen für ng-enter, ng-leave usw. nicht für ng-repeat hinzugefügt. –