AngularJS LT DirectiveにngAnimateをつけよう

自己紹介 吉田徹生（よしだてっせい） @teyosh

AngularJS使ってますか？ 11月に1.2が公開されました。

1.2 追加で待望のngAnimateが公 式モジュールとして追加されま した。

Extrasのディレクトリ

ngAnimateの基本 ngAnimateを読み込む angular.module("mainAnime", ["ngAnimate"])

用意してされているng-* ng-repeat ng-show ng-hide ng-if ng-view ng-include

例 : ng-repeat ng-repeat対象の配列に追加削除した際にアニ メーションを付ける

CSS3でアニメーション .smain-animation {left : 100px; position:relative; -webkit-transition:0.5s linear all;} .smain-animation.ng-enter, .smain-animation.ng-leave.ng-leave-active {left:-100px;} .smain-animation.ng-enter.ng-enter-active, .smain-animation.ng-leave { left:100px; }

JavaScriptでアニメーション .animation('.main-animation', function(){ return { enter: function(element, done){ $(element).css({left : -100}); $(element).animate({left : 50},done); }, leave : function(element, done){ $(element).animate({left : 0},done); } }; })

Directiveにアニメーション もちろん自作のDirectiveにもア ニメーションを設定できます。

$animateで設定 $animateで実行されます。 $animate.enter(element, parent, after, callback); $animate.leave(element, callback); $animate.move(element, parent, after, callback); $animate.addClass(element, className, callback); $animate.removeClass(element, className, callback);

こんなかんじでDirective .directive("mainAnimation", ["$animate", function($animate){ return { restrict: "A", template: "enterleave", link: function(scope, element, attr){ scope.spans = [];

続き enter追加 scope.enteranime = function(){ var $test = angular.element(""); var $after = angular.element(element.children()[element.children().length- 1]); $animate.enter($test, element, $after, function(){ scope.spans.push($test); }); };

続き leave追加 scope.leaveanime = function(){ if(scope.spans.length){ $animate.leave(scope.spans.pop()); } }; } }; }])

出来たのはこちら http://plnkr. co/edit/MlEVCWFvEWWAMdZkPcSV? p=preview