ngRepeat Animasyon açısal 1.4

Question

i bu sayfada (Açısal 1.1.5) üzerinde bulunabilir birine benzer olmak istiyorum Eğik JS 1.4.0, bir Animasyon ulaşmak için meşgul ediyorum: http://www.nganimate.org/angularjs/ng-repeat/move

Anladığım kadarıyla, son birkaç sürümde ngAnimate'de önemli değişiklikler yapıldı.

Uygulamamın önemli bölümünü Plunkr ile yeniden oluşturdum. http://plnkr.co/edit/9DK3LEAaGDgDT2kIILjG?p=preview

Farklı bir filtre girişi nedeniyle, bir css canlandırmasıyla canlandırılacak olan öğeleri göstermek ve gizlemek istiyorum.

Bu benim filtre girdidir:

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

Ve bu aramadan tüm Elemanları göstermek hangi listesidir.

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

arama ve filtreler iyi çalışır, ancak CSS animasyonları tetiklenir değildir: Burada

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

benim CSS animasyonları bulunmaktadır.

Eğer birisi bu soruna bir çözüm bulsaydı çok sevinirim!

Answer 1

Açısal 1.4 gibi en yeni sürüm yaklaşımı biraz farklı. Öncelikle açısal animasyon js içermelidir.

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

Sonra böyle modüle 'ngAnimate' enjekte edilmelidir.

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

da ng-reapeat

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

aşağıda

.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