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

AngularJS DirectiveでAnimate

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.

AngularJS DirectiveでAnimate

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

Avatar for Tessei Yoshida

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); }); };