web-dev-qa-db-ja.com

Angularjs ng-animate moveの例？

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

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

animationangularjs
18
user2354397

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

this fiddle で見ることができます。ここでは、4人のスペースで2人をスワップし、要素0、1に移動アニメーションが適用されます。 、要素2と3がありますが、要素0と4だけを交換しても、4はありません。次の兄弟セレクタは要素1、2、3の両方に設定された値をオーバーライドし、4に適用される唯一のスタイルです。

this fiddle であなたは本当にそれを見ることができます、6番目の要素を3番目に置き換えて新しい人を入れるボタンがあります1番目と3番目。 1番目と3番目はエンターアニメーションを取得し、4番目と5番目は移動アニメーションを取得し、6番目は何も取得しませんが、6番目の位置には移動した人物がいるだけです。

14
Jason Goemaat

チュートリアルで非常に良い記事があります：

http://www.yearofmoo.com/2013/04/animation-in-angularjs.html

11
Julio Garcia

ドキュメント ：

  • enter-リストに新しいアイテムが追加されたとき、またはフィルターの後にアイテムが表示されたとき
  • leave-アイテムがリストから削除されたとき、またはアイテムが除外されたとき
  • 移動-隣接するアイテムがフィルターされて並べ替えられた場合、またはアイテムのコンテンツが並べ替えられた場合

そのため、アイテムの内外のフィルタリングは、移動アニメーションではなく、入退場アニメーションのみをトリガーします。

移動アニメーションをトリガーするには、次のようにアイテムの順序を変更する必要があります jsfiddle example ：

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

NgAnimateの詳細な説明もご覧ください。

http://gsklee.im/post/50254705713/nganimate-your-angularjs-apps-with-css3-and-jquery

8
gsklee