Seçici filtrelerle açısal animasyon

Question

Filtrenimin küçük açısal uygulamasında gösterdiği sonuçları canlandırmaya çalışıyorum ... Ancak, nokta, tüm öğeleri vb. Gizlemek/göstermek yerine yeni Liste öğeleri oluşturmasıdır.

Kullanıcı filtreleyip sonuçlarıma nasıl ulaşabilirim? Benim liste öğesine ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}" ekleyerek denedim http://codepen.io/anon/pen/mPxEGE

, boşuna:

benim şimdiki kodu için bir kalem oluşturduk. Sadece filtrede kullanılmadığında LI'yı tamamen kaldırır. P.s "Erkek" filtresinin düzgün çalışmadığını fark ettim: ')

Answer 1

Sen animate-enter için css eklemek zorunda

ve için animate-leave

• girin: animasyon girmek & hareketlendirmek girmek aktif
Bırakılan için
• : animasyon-ayrılmak & animate-terk-aktif

here Yani eklemek belirtilen gibi

:Bir updated codepen. Animasyonlarım çok iyi değil ^^

PS. Ayrıca denetleyiciye ngAnimate enjekte etmeniz gerekmez.

Answer 2

<li> öğenize ve uygun bir css'ye bir sınıf ekledim ve işe yarıyor.

HTML açısal yoluyla

.item.ng-move, 
.item.ng-enter, 
.item.ng-leave { 
    -webkit-transition:all linear 0.5s; 
    transition:all linear 0.5s; 
} 

.item.ng-leave.ng-leave-active, 
.item.ng-move, 
.item.ng-enter { 
    opacity:0; 
} 

.item.ng-leave, 
.item.ng-move.ng-move-active, 
.item.ng-enter.ng-enter-active { 
    opacity:1; 
} 

Answer 3

Animasyonlar sadece 2 şekilde uygulanabilir

<li class="item" ng-repeat="item in items | filter:search:strict"> 
     {{item.name}} 
</li> 

CSS. $ Canlı sağlayıcı veya CSS aracılığıyla. İşte

http://codepen.io/TheLarkInn/pen/qZoaWE

/* 


We're using CSS transitions for when 
    the enter and move events are triggered 
    for the element that has the .repeated-item 
    class 
*/ 
.repeated-item.ng-enter, .repeated-item.ng-move { 
    -webkit-transition:0.5s linear all; 
    -moz-transition:0.5s linear all; 
    -o-transition:0.5s linear all; 
    transition:0.5s linear all; 
    opacity:0; 
} 

/* 
The ng-enter-active and ng-move-active 
are where the transition destination properties 
are set so that the animation knows what to 
animate. 
*/ 
.repeated-item.ng-enter.ng-enter-active, 
.repeated-item.ng-move.ng-move-active { 
    opacity:1; 
} 

sizin tekrarlanan liste için animasyonlar uygulayan bir codepen olduğunu. Bu örnek, doğrudan documentation'dan gelir.