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
570
Angular2を書くためのAngularJSの書き方
teyosh
3
8.2k
express 用 framework genieについて
teyosh
0
2.9k
はじめてのAngularJS
teyosh
1
830
Other Decks in Technology
See All in Technology
KMP の Swift export
kokihirokawa
0
330
ユニットテストに対する考え方の変遷 / Everyone should watch his live coding
mdstoy
0
120
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
980
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
spiderplus_cb
0
490
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
100
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ:検査・適応で未来を開発 / AI-driven product owner. scrummat2025
yosuke_nagai
4
580
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
1
880
Goにおける 生成AIによるコード生成の ベンチマーク評価入門
daisuketakeda
2
100
Findy Team+のSOC2取得までの道のり
rvirus0817
0
330
バイブコーディングと継続的デプロイメント
nwiizo
2
420
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
100
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
170
Featured
See All Featured
It's Worth the Effort
3n
187
28k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
RailsConf 2023
tenderlove
30
1.2k
Balancing Empowerment & Direction
lara
4
680
Thoughts on Productivity
jonyablonski
70
4.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Optimizing for Happiness
mojombo
379
70k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Practical Orchestrator
shlominoach
190
11k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
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