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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Tessei Yoshida
December 03, 2013
Technology
2
450
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
200
型を使うと便利な開発
teyosh
0
3k
第64回 HTML5とか勉強会 〜 Angular特集 〜
teyosh
0
580
Angular2を書くためのAngularJSの書き方
teyosh
3
8.2k
express 用 framework genieについて
teyosh
0
2.9k
はじめてのAngularJS
teyosh
1
840
Other Decks in Technology
See All in Technology
制約が導く迷わない設計 〜 信頼性と運用性を両立するマイナンバー管理システムの実践 〜
bwkw
3
870
SREのプラクティスを用いた3領域同時 マネジメントへの挑戦 〜SRE・情シス・セキュリティを統合した チーム運営術〜
coconala_engineer
2
590
GSIが複数キー対応したことで、俺達はいったい何が嬉しいのか?
smt7174
3
140
なぜ今、コスト最適化(倹約)が必要なのか? ~AWSでのコスト最適化の進め方「目的編」~
htan
1
110
クレジットカード決済基盤を支えるSRE - 厳格な監査とSRE運用の両立 (SRE Kaigi 2026)
capytan
6
2.6k
Kiro IDEのドキュメントを全部読んだので地味だけどちょっと嬉しい機能を紹介する
khmoryz
0
160
FinTech SREのAWSサービス活用/Leveraging AWS Services in FinTech SRE
maaaato
0
120
今日から始めるAmazon Bedrock AgentCore
har1101
4
390
AzureでのIaC - Bicep? Terraform? それ早く言ってよ会議
torumakabe
1
350
MCPでつなぐElasticsearchとLLM - 深夜の障害対応を楽にしたい / Bridging Elasticsearch and LLMs with MCP
sashimimochi
0
140
月間数億レコードのアクセスログ基盤を無停止・低コストでAWS移行せよ!アプリケーションエンジニアのSREチャレンジ💪
miyamu
0
800
外部キー制約の知っておいて欲しいこと - RDBMSを正しく使うために必要なこと / FOREIGN KEY Night
soudai
PRO
12
4.7k
Featured
See All Featured
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
77
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
110
GraphQLの誤解/rethinking-graphql
sonatard
74
11k
New Earth Scene 8
popppiees
1
1.5k
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
730
AI Search: Where Are We & What Can We Do About It?
aleyda
0
6.9k
The SEO Collaboration Effect
kristinabergwall1
0
350
Paper Plane (Part 1)
katiecoart
PRO
0
4k
Mobile First: as difficult as doing things right
swwweet
225
10k
Statistics for Hackers
jakevdp
799
230k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
1
1.3k
It's Worth the Effort
3n
188
29k
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