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

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

angular.jsをやってみる (15) – ngAnimate -では単にng-enterやng-leaveなどのCSSを利用する事でアニメーションを利用する事が出来たわけだけど、これをJavaScriptなangular.moduleによってコントロールする事も出来る模様。という事で前回同様なフェードイン・フェードアウトをやってみた

index.html

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script src="jquery.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-animate.js"></script>
    <script src="app.js"></script>
  </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>

前回使ってたCSSはロードしないだけ。あとはJavaScript側でアニメーションの定義等をコントロールする。でその際に(-webkit-)transition等のコントロールをしたい場合においてはアニメーションが発生する際に.ng-animateっていうクラスが動的に追加される模様なので

.ng-animate {
  -webkit-transition: 1.5s linear all;
  transition: 1.5s linear all;
}

的なCSSを書いておけば良い

app.js

angular.module("app", ["ngAnimate"])
  .controller("SampleController", function($scope) {
    $scope.samples = ["hoge", "fuga", "foobar"];
  })
  .animation(".item", function($animate, $timeout) {
    return {
      // .ng-enter
      enter: function(element, done) {
        element.css("opacity", 0);
        jQuery(element).animate({ opacity: 1 }, done);

        /*
        $timeout(
          function() {
            element.css("opacity", 1);
            done();
          },
          1500
        );
        */

        return function(cancelled) {
        }
      },

      // .ng-leave
      leave: function(element, done) {
        element.css("opacity", 1);
        jQuery(element).animate({ opacity: 0 }, done);

        /*
        $timeout(
          function() {
            element.css("opacity", 0);
            done();
          },
          1500
        );
        */

        return function(cancelled) {
        }
      },
      move: function(element, done) {
      },
      beforeAddClass: function(element, className, done) {
      },
      addClass: function(element, className, done) {
      },
      beforeRemoveClass: function(element, className, done) {
      },
      removeClass: function(element, className, done) {
      }
    };
  });

っていう感じでenterやleave等を持つメソッドなオブジェクトを返してあげれば良い模様。でそのメソッドでfunctionを返す事でキャンセルされたか否かでcompleteな処理をする事も出来る模様

てな感じでやると前回と同様なアニメーションが出来る。で他にも書いてるけどbeforeAddClassやaddClass等のメソッドも定義出来る模様だけど、どうもいまいち参照が再現出来なかったので今回もパス。分かったらこの記事に追記する

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