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.7k
第64回 HTML5とか勉強会 〜 Angular特集 〜
teyosh
0
510
Angular2を書くためのAngularJSの書き方
teyosh
3
8k
express 用 framework genieについて
teyosh
0
2.8k
はじめてのAngularJS
teyosh
1
770
Other Decks in Technology
See All in Technology
小規模に始めるデータメッシュとデータガバナンスの実践
kimujun
3
580
Fargateを使った研修の話
takesection
0
110
Amazon_CloudWatch_ログ異常検出_導入ガイド
tsujiba
4
1.5k
独自ツール開発でスタジオ撮影をDX!「VLS(Virtual LED Studio)」 / dx-studio-vls
cyberagentdevelopers
PRO
1
180
AWS re:Inventを徹底的に楽しむためのTips / Tips for thoroughly enjoying AWS re:Invent
yuj1osm
1
560
グローバル展開を見据えたサービスにおける機械翻訳プラクティス / dp-ai-translating
cyberagentdevelopers
PRO
1
150
ガチ勢によるPipeCD運用大全〜滑らかなCI/CDを添えて〜 / ai-pipecd-encyclopedia
cyberagentdevelopers
PRO
3
200
とあるユーザー企業におけるリスクベースで考えるセキュリティ業務のお話し
4su_para
3
320
AWS CDKでデータリストアの運用、どのように設計する?~Aurora・EFSの実践事例を紹介~/aws-cdk-data-restore-aurora-efs
mhrtech
4
640
生成AIと知識グラフの相互利用に基づく文書解析
koujikozaki
1
140
Vueで Webコンポーネントを作って Reactで使う / 20241030-cloudsign-vuefes_after_night
bengo4com
4
2.5k
Nix入門パラダイム編
asa1984
2
200
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Thoughts on Productivity
jonyablonski
67
4.3k
Making the Leap to Tech Lead
cromwellryan
132
8.9k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Building Your Own Lightsaber
phodgson
102
6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
13
1.9k
The Language of Interfaces
destraynor
154
24k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Making Projects Easy
brettharned
115
5.9k
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