選択ボックスフィルタを使用した角型アニメーション

Question

私の小さな角型アプリケーションでフィルタが表示する結果をアニメートしようとしています...ただし、すべてのアイテムを隠したり表示したりする代わりに新しいリストアイテムをレンダリングするだけです。

ユーザーがフィルタリングしているときに結果をフェードアウト/インにするにはどうすればよいですか？

私は私の現在のコードのためのペンを作成しました：http://codepen.io/anon/pen/mPxEGE

私は無駄に、私のリスト項目にng-animate="{enter: 'animate-enter', leave: 'animate-leave'}"を追加しようとしました。フィルタで使用されていないときは、LIのみを完全に削除します。私は正常に動作し、私の「男性」フィルタイマイチ気づいた P.s： '）

Answer 1

あなたは animate-enterのCSSを追加する必要が

とするためanimate-leave

• 入力します：アニメーション入力し&アニメイト入力し、アクティブ
休職の場合
• ：アニメーション-まま&アニメーションを-残しアクティブ

hereだから追加指定などの

：

.animate-enter { 
    -webkit-transition: 1s linear all; /* Chrome */ 
    transition: 1s linear all; 
    opacity: 0; 
} 

.animate-enter.animate-enter-active { 
    opacity: 1; 
} 

ここにはupdated codepenがあります。私のアニメーションはあまり良くありません^^

PS。コントローラにngAnimateを注入する必要もありません。

Answer 2

は、私はあなたの<li>要素と適切なCSSのクラスを追加してきましたし、それが動作します。角度経由

HTML

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

CSS

.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

アニメーションはのみ2つの方法で実現することができます。 $ animateプロバイダーまたはCSSを介してここで

/* 


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

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

ご繰り返しリストのためのアニメーションを実装するcodepenです。この例はdocumentationから直接得られます。