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
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
190
型を使うと便利な開発
teyosh
0
2.9k
第64回 HTML5とか勉強会 〜 Angular特集 〜
teyosh
0
560
Angular2を書くためのAngularJSの書き方
teyosh
3
8.1k
express 用 framework genieについて
teyosh
0
2.9k
はじめてのAngularJS
teyosh
1
830
Other Decks in Technology
See All in Technology
DDD集約とサービスコンテキスト境界との関係性
pandayumi
2
200
「魔法少女まどか☆マギカ Magia Exedra」での負荷試験の実践と学び
gree_tech
PRO
0
440
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
3
420
攻撃と防御で実践するプロダクトセキュリティ演習~導入パート~
recruitengineers
PRO
3
1.7k
【Grafana Meetup Japan #6】Grafanaをリバプロ配下で動かすときにやること ~ Grafana Liveってなんだ ~
yoshitake945
0
220
実践AIガバナンス
asei
3
280
トヨタ生産方式(TPS)入門
recruitengineers
PRO
6
1.4k
シークレット管理だけじゃない!HashiCorp Vault でデータ暗号化をしよう / Beyond Secret Management! Let's Encrypt Data with HashiCorp Vault
nnstt1
2
130
絶対に失敗できないキャンペーンページの高速かつ安全な開発、WINTICKET × microCMS の開発事例
microcms
0
360
「守る」から「進化させる」セキュリティへ ~AWS re:Inforce 2025参加報告~ / AWS re:Inforce 2025 Participation Report
yuj1osm
1
180
衝突して強くなる! BLUE GIANTと アジャイルチームの共通点とは ― いきいきと活気に満ちたグルーヴあるチームを作るコツ ― / BLUE GIANT and Agile Teams
naitosatoshi
0
290
DeNA での思い出 / Memories at DeNA
orgachem
PRO
6
1.9k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
790
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
510
How STYLIGHT went responsive
nonsquared
100
5.8k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
What's in a price? How to price your products and services
michaelherold
246
12k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
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