angular.jsをやってみる (15) - ngAnimate -

2014-04-02T00:00:00+00:00 angular.js JavaScript

参考: AngularJSでちゃちゃっとアニメーションを試す - AngularJS Ninja

公式リファレンス: http://docs.angularjs.org/api/ngAnimate

んまぁ名前からしてCSS3?なアニメーションな機能をサポートするものっぽい。単純にng-repeatしている部分なエントリーをフィルターし、出る際にフェードインさせたり、消えたりする際にフェードアウトさせたりをやってみる

index.html

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.4/angular-animate.js"></script>
    <script src="app.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div class="container" ng-controller="SampleController">
      <input type="text" ng-model="q" />
      <div ng-repeat="sample in samples| filter:q" class="item">
        {% raw %}{{sample}}{% endraw %}
      </div>
    </div>
  </body>
</html>

ngAnimateを使うには別途angular-animate.jsな参照が必要。でangular.moduleでngAnimateを使うようにしなきゃならん。単純なので

angular.module("app", ["ngAnimate"])
  .controller("SampleController", function($scope) {
    $scope.samples = ["hoge", "fuga", "foobar"];
  });

的な感じで。あとはそのアニメーションで使用されるスタイルシートを書くだけ

style.css

.item.ng-enter, .item.ng-leave {
  -webkit-transition: 3s linear all;
  transition: 3s linear all;
}

.item.ng-enter {
  opacity: 0;
}

.item.ng-enter-active {
  opacity: 1;
}

.item.ng-leave {
  opacity: 1;
}

.item.ng-leave-active {
  opacity: 0;
}

的な感じで流れ的には

  • フィルターされて非表示状態になる際には.ng-leaveから.ng-leave-activeにクラスが転移?されて最終的にノードが一時的?に削除される
  • フィルターされた状態を解除されて表示状態になる際には.ng-enterから.ng-enter-activeにクラスが転移されて、削除されていたノードが復活する

上記のスタイルシートだと以下ようになるかと

  • 非表示状態により.ng-leaveが発生しopacityが1になり、その後.ng-leave-activeが発生してopacityが0になる。その際にtransitionのディレイにより遅延?
  • 表示状態により.ng-enterが発生しopacityが0になり、その後.ng-enter-leaveが発生してopacityが1になる。その際にtransitionのディレイにより遅延

っていう感じかと。詳しくは上記参考先のclass属性の変化を読めばわかりやすいかと思われる。他にも.ng-moveっていうのもあるらしいけど、これは今回使ってないので(ry

ちなみに公式リファレンスによるとそこら辺をangular.module辺りで処理させる事も可能らしい。今回まだ検証とかしてないので後日書くかも知れない

angular.jsをやってみる (16) - ngAnimate#2 - angular.jsをやってみる (14) - $scope.$apply -