web-dev-qa-db-ja.com

ng-animate：モデルが変更されたときのアニメーション

ユーザーが値を増減できるテーブルを作成しました。 Fiddle を参照してください

//sample code as its not allowing me to Push the link to JSFiddle with out pasting code

   <tr ng-repeat="d in dataSource" ng-animate="'animate'">

// css - as from angular page
.animate-enter {
    -webkit-transition: 1s linear all; /* Chrome */
    transition: 1s linear all;
    background-color:Yellow;
}

.animate-enter.animate-enter-active {
    background-color:Red;
}

モデルが更新されたときにアニメーションを実行します。つまり、ユーザーが値を変更した場合に備えて、テーブル列の背景色が赤から白に変わります。

したがって、特定の列で上矢印または下矢印をクリックすると、そのテーブル列の背景色が赤から白に変わります。

頭を動かすことができません。これを達成する方法についてのポインタはありますか？

angularjsng-animate
29
Anand

コードにはいくつかの問題があります。

  1. [〜＃〜] never [〜＃〜]コントローラーのコードでDOM操作を行う：$(elem).animate(..は避けるべきものです。 DOM要素で操作できるのはディレクティブのみです。

  2. 1.2+バージョンのAngularJSでは、ngAnimateモジュールを参照する必要があります。

  3. CSSベースのアニメーションへのフォールバックを使用してCSS3アニメーションを実行することをお勧めします。

変更を追跡し、アニメーションをトリガーしてから削除するクラスを追加するディレクティブを作成することを提案します。

app.directive('animateOnChange', function($animate,$timeout) {
  return function(scope, elem, attr) {
      scope.$watch(attr.animateOnChange, function(nv,ov) {
        if (nv!=ov) {
          var c = nv > ov?'change-up':'change';
          $animate.addClass(elem,c).then(function() {
            $timeout(function() {$animate.removeClass(elem,c);});
          });
        }
      });
   };
});

作業例： http://plnkr.co/edit/zs495osfSnWSvWBIn3rh?p=preview

55
Valentyn Shybanov

これは、単純なディレクティブとCSS3アニメーションで解決できます。

HTML

<span animate-on-change="someValue">{{someValue}}</span>

指令

myModule.directive('animateOnChange', function($timeout) {
  return function(scope, element, attr) {
    scope.$watch(attr.animateOnChange, function(nv,ov) {
      if (nv!=ov) {
        element.addClass('changed');
        $timeout(function() {
          element.removeClass('changed');
        }, 1000); // Could be enhanced to take duration as a parameter
      }
    });
  };
});

CSS

[animate-on-change] {
  transition: all 1s;
  -webkit-transition: all 1s;
}
[animate-on-change].changed {
  background-color: red;
  transition: none;
  -webkit-transition: none;
}

フィドル

17
Clay

in Angular 1.5 uは ngAnimateSwap 組み込みディレクティブを使用できます。

ドキュメントから：

ngAnimateSwapは、アニメーション指向のディレクティブで、関連付けられた式が変更されるたびにコンテナを削除および入力できます。このディレクティブの一般的なユースケースは、一度に1つの画像が含まれる回転バナーまたはスライダーコンポーネントです。アクティブな画像が変更されると、古い画像は退場アニメーションを実行し、新しい要素はエンターアニメーションを介して挿入されます。

9
Nexaddo