animation - Angularjs ng-animate 移動例?

Question

angularjs ng-animate を動かして動作させることができないようです。また、実際の例もないようです。たとえば、デモフィドルを見てみましょう: http://jsfiddle.net/yfajy/

次のように css に移動命令を追加しても、リストをフィルタリングするときにアニメーション効果は作成されません。

.example-repeat-move-setup {  opacity:1;
  color:red }
.example-repeat-move-setup.example-repeat-move-start {   opacity:1;
  color:black;}

誰かが実際の例を投稿できますか?

score 14 · Accepted Answer

私はそれをいくつかいじり、次の兄弟CSSセレクター+ （フィドル）を使用して動作させました。どうやらmoveアニメーションは、最初に移動した要素と最後から 2 番目に変更された要素の間のすべての要素に適用されますが、最後に変更された要素には適用されません。

このフィドルでは、要素 0 と 4 のみを交換したにもかかわらず、移動アニメーションが要素 0、1、2、3 に適用され、要素 4 には適用されないことがわかります。要素 1、2、および 3 の両方に適用され、4 に適用される唯一のスタイルです。

このフィドルでは、実際に見ることができます。6 番目の要素を 3 番目の要素に置き換え、新しい人を 1 番目と 3 番目に配置するボタンがあります。1 番目と 3 番目はエンターアニメーションを取得し、4 番目と 5 番目は移動アニメーションを取得し、6 番目は何も取得しません。

score 8 · Accepted Answer

そのため、アイテムをフィルタリングすると、移動アニメーションではなく、開始アニメーションと終了アニメーションのみがトリガーされます。

$scope.shuffle = function() {
    $scope.friends = _($scope.friends).shuffle();
}

ngAnimate に関するより詳細な説明もご覧ください。

2 に答える 2