Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AngularJS DirectiveでAnimate

AngularJS DirectiveでAnimate

DirectiveでngAnimateを利用する方法を簡単に紹介

Tessei Yoshida

December 03, 2013
Tweet

More Decks by Tessei Yoshida

Other Decks in Technology

Transcript

  1. 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; }
  2. 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); } }; })
  3. $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);
  4. こんなかんじでDirective .directive("mainAnimation", ["$animate", function($animate){ return { restrict: "A", template: "<button

    ng-click='enteranime()'>enter</button><button ng- click='leaveanime()'>leave</button>", link: function(scope, element, attr){ scope.spans = [];
  5. 続き enter追加 scope.enteranime = function(){ var $test = angular.element("<div class=\"main-animation\">test</div>");

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