web-dev-qa-db-ja.com

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

Ng-repeatを使用して反復処理するリストがあります。ユーザーは、上矢印アイコンと下矢印アイコンを使用してリストアイテムを操作し、それらをクリックすると、「リスト」の要素の順序を変更するだけです。 "これは、angularがモデルの変更を提案し、変更がビューに自動的に反映されることです。

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

MoveUpのロジック：-

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

上記のコードは完全に機能し、アイテムを下にシフトするロジックも同様です。しかし、解決したい問題は、アニメーションをどのように配置すればよいですか？ angularはビューとモデルのバインドを独自に処理しますが、下矢印アイコンを押すとビューが更新されるため、アニメーションを挿入する方法はありますか？

javascriptangularjsjquery-animateangularjs-ng-repeat
32
Rishul Matta

Marcelのコメントに続きます。AngularJS1.2では、ng-animateディレクティブを使用する必要はありません。代わりに：

  1. Includeangular-animate[-min].js。
  2. モジュールをngAnimateに依存させます。
  3. .ng-enterや.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;
}

（他の人の）Plunkerのデモ 。

さまざまなCSSクラスの進行の詳細については、 $ animateのドキュメント を参照してください。

52
z0r

このリンクを確認してください http://www.nganimate.org/

  1. Ng-animate属性を、DOMを変更する別のディレクティブを持つ要素に宣言する必要があります

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

  2. CSSトランジションまたはアニメーションを追加する必要があります。

    .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

6
Rokas

最後の答えを補完するものとして、順序が変更されたときのアニメーション用のng-moveクラスがあります。

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

最後 ここにドキュメント 。

4
clopez

プラグインの数を減らすために「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);
    };
});

あなたのコントローラーで

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