ngRepeat Animacja w kanciastym 1.4

Question

Mam zamiar osiągnąć animację w Angular JS 1.4.0, który chciałbym być podobny do tego, który można znaleźć na tej stronie (Angular 1.1.5): http://www.nganimate.org/angularjs/ng-repeat/move

Jak rozumiem, nastąpiły poważne zmiany w ngAnimate w ciągu ostatnich kilku wersji.

Odtworzyłem ważną część mojej aplikacji z Plunkr. Można go znaleźć tutaj http://plnkr.co/edit/9DK3LEAaGDgDT2kIILjG?p=preview

Chcę, aby przedmioty, które pokazują i ukrywają, ze względu na inne wejście filtru, animowane za pomocą animacji css.

To jest mój wkład filtra:

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

I to jest lista, w której wszystkie elementy z wyszukiwania pojawi.

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

Oto moje animacje 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; 
} 

Wyszukiwanie i filtry działają dobrze, ale animacje CSS nie są wywoływane.

Byłbym bardzo zadowolony, gdyby ktoś miał rozwiązanie tego problemu!

Answer 1

Najnowsza wersja, podobnie jak kątowa 1.4, jest nieco inna. Przede wszystkim powinieneś włączyć animację kątową js.

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

Następnie należy wprowadzić "ngAnimate" do modułu takiego jak to.

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

również użyć klasy jak ten w wraz z NG-reapeat

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

również użyć CSS dla ożywionej jak poniżej

.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