anglejsでng-repeatでアニメーションを使用する方法

Question

ng-repeatを使用して繰り返しを繰り返すリストがあります。ユーザーは、上向き矢印と下向き矢印アイコンを使用してリスト項目を操作できますそれらは単に「リスト」内の要素の順序を変更しますが、これは角度がモデルを変更することを示唆し、変更は自動的にビューに反映されます。 moveUpというにおける

<div ng-repeat="item in list"> 
{{item.name}} 
<div class="icon-up-arrow" ng-click="moveUp($index);"></div> 
<div class="icon-down-arrow" ng-click="moveDown($index);"></div> 
</div> 

ロジック -

$scope.moveUp= function(position){ 
var temp=list[position-1]; 
list[position-1]=list[position]; 
list[position=temp]; 
}; 

上記のコードは完全に罰金と同様の動作項目をシフトダウンするためのロジックです。しかし、私が解決したい問題はアニメーションをどのように置くかです。私は角度が自分自身でバインディングビューとモデルの世話をすることを知っているが、ダウン矢印アイコンを押してビューが更新されるとアニメーションを挿入する方法はありますか？あなたは、CSSのトランジションを追加する必要があるか、DOM

div ng-repeat="item in itens" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}" 

を変更し、別のディレクティブを持っている要素にNG-アニメーションの属性を宣言する必要が

Answer 1

をマルセルさんのコメントに続き：AngularJS 1.2で、あなたはng-animateディレクティブを使用する必要はありません。代わりに：

1. angular-animate[-min].jsを含みます。
2. モジュールをngAnimateに依存させるようにしてください。
3. classes like .ng-enter and .ng-enter-activeを使用してCSSでトランジションを定義します。
4. いつものようにng-repeatを使用してください。

HTML：

<div ng-app="foo"> 
    <!-- Set up controllers etc, and then: --> 
    <ul> 
     <li ng-repeat="item in items">{{item}}</li> 
    </ul> 

はJavaScript：

angular.module('foo', ['ngAnimate']); 
// controllers not shown 

CSS：

li { 
    opacity: 1; 
} 
li.ng-enter { 
    -webkit-transition: 1s; 
    transition: 1s; 
    opacity: 0; 
} 
li.ng-enter-active { 
    opacity: 1; 
} 

Demo in (someone else's) Plunker。

さまざまなCSSクラスの進行状況の詳細については、docs for $animateを参照してください。最後の答えを補完

Answer 2

チェックこのリンクhttp://www.nganimate.org/

1. アニメーション。

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

あなたはここにplnkr例を確認することができます：http://plnkr.co/edit/VfWsyg9d7xROoiW9HHRM

Answer 3

は、順序が変更されたときのアニメーションのためのNGムーブクラスがあります：

li { 
    opacity: 1; 
} 
li.ng-move { 
    -webkit-transition: 1s; 
    transition: 1s; 
    opacity: 0; 
} 
li.ng-move-active { 
    opacity: 1; 
} 

最終documentation here。

Answer 4

プラグイン数を減らすために 'ngAnimate'モジュールを使用しない場合は、ng-initとカスタムディレクティブを使用して簡単なトランジション効果をアーカイブできます。あなたに

<li ng-repeat="item in items" class="item" item-init>{{item.name}}</li> 

.item{ 
    opacity:0; 

    -webkit-transition: all linear 300ms; 
    transition: all linear 300ms; 
} 
.item.visible{ 
    opacity:1; 
} 


myApp.directive('itemInit', function ($compile) { 
    return function (scope, element, attrs) { 
     scope.initItem(element); 
    }; 
}); 

私はNG-アニメーションディレクティブはAngularJS 1.2で非推奨と思う

$scope.initItem = function(el){ 
    $timeout(function(){ 
     angular.element(el).addClass('visible'); 
    },0); 
}