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
Vue.jsでアニメーションしよう!
Search
Sanadi
January 29, 2020
Design
0
370
Vue.jsでアニメーションしよう!
Sanadi
January 29, 2020
Tweet
Share
More Decks by Sanadi
See All by Sanadi
生きデザ横丁_真田LT
sanada_akira
0
86
ド素人がLaravelを触って思ったこと
sanada_akira
0
1k
Other Decks in Design
See All in Design
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3k
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
140
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
5
430
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
490
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
210
TUNAG BOOK 2024
stmn
0
470
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
360
Goodpatch Tour💙 / We are hiring!
goodpatch
31
790k
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
120
[Designship2024] デザインの力でサービスの価値を追求していたら、組織全体をデザインしていた話
okakasoysauce
2
1.1k
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
210
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
190
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
RailsConf 2023
tenderlove
29
1k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Code Reviewing Like a Champion
maltzj
521
39k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
4 Signs Your Business is Dying
shpigford
182
22k
The Pragmatic Product Professional
lauravandoore
32
6.4k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Visualization
eitanlees
146
15k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
A designer walks into a library…
pauljervisheath
205
24k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Transcript
アニメーション Vue.jsで しよう!
⾃⼰紹介 真⽥ 明 クリエイティブスタジオ・ファボリータという屋号で 個⼈事業主してます。 仕事内容は、Web/グラフィックデザイン・Web開発。 真⽥明 デザイン
みなさん、cssアニメーションをどうされてますか?
クラスを作って、on/offとかみたいに切り替える jQueryのanimate()を使ってフレームごと設定する その他cssやjsのアニメーションライブラリを使う
もちろん…
Vueでもアニメーションができます!
Vueでアニメーションする場合 クラスを作ってVueで切り替え Transitionラッパーを使う サードパーティのアニメーションライブラリを使う
どう使い分けるの???
Active状態のon/offを使う場合は クラスを作ってVueで切り替えるほうがよさそう Class属性をバインディングする
要素の有無の切り替えを使う場合は Transitionラッパーを使いましょう! 要素を<transition></transition>でくくるだけ!
@keyframesを使ったcssアニメーションも Transitionを使いましょう!
jQueryのanimate()が恋しくてたまらない⽅は サードパーティのライブラリを使いましょう! Velocity.js TweenMax などなど
その他Vueでアニメーションを使う場合 Vuex カスタムディレクティブ ウォッチャー でもできるらしい…
ドキュメント vue transition
デモで作ったリポジトリ https://github.com/bje0696/vue_animation