Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AngularJS DirectiveでAnimate
Search
Tessei Yoshida
December 03, 2013
Technology
2
440
AngularJS DirectiveでAnimate
DirectiveでngAnimateを利用する方法を簡単に紹介
Tessei Yoshida
December 03, 2013
Tweet
Share
More Decks by Tessei Yoshida
See All by Tessei Yoshida
Angular Universalの歩き方
teyosh
0
170
型を使うと便利な開発
teyosh
0
2.8k
第64回 HTML5とか勉強会 〜 Angular特集 〜
teyosh
0
530
Angular2を書くためのAngularJSの書き方
teyosh
3
8.1k
express 用 framework genieについて
teyosh
0
2.8k
はじめてのAngularJS
teyosh
1
790
Other Decks in Technology
See All in Technology
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
150
Change Managerを活用して本番環境へのセキュアなGUIアクセスを統制する / Control Secure GUI Access to the Production Environment with Change Manager
yuj1osm
0
110
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
240
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.8k
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.6k
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
520
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
170
AIエージェント開発のノウハウと課題
pharma_x_tech
8
4.5k
クラウド食堂とは?
hiyanger
0
120
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
790
OPENLOGI Company Profile for engineer
hr01
1
20k
OPENLOGI Company Profile
hr01
0
60k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
For a Future-Friendly Web
brad_frost
176
9.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
13
1k
How to train your dragon (web standard)
notwaldorf
91
5.9k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Gamification - CAS2011
davidbonilla
80
5.2k
Bash Introduction
62gerente
611
210k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Transcript
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対象の配列に追加削除した際にアニ メーションを付ける <div class=”smain-animation” ng-repeat=”item in items
track by $index”>{{item}}</div>
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: "<button
ng-click='enteranime()'>enter</button><button ng- click='leaveanime()'>leave</button>", link: function(scope, element, attr){ scope.spans = [];
続き 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); }); };
続き leave追加 scope.leaveanime = function(){ if(scope.spans.length){ $animate.leave(scope.spans.pop()); } }; }
}; }])
出来たのはこちら http://plnkr. co/edit/MlEVCWFvEWWAMdZkPcSV? p=preview