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
91
ド素人がLaravelを触って思ったこと
sanada_akira
0
1.1k
Other Decks in Design
See All in Design
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3.3k
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
120
sachi_y_portfolio
sachi337
0
510
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
130
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
480
UXデザインはなぜ定着しないのか?
designstudiopartners
0
930
freee + Product Design FY25Q4
freee
4
16k
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
500
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
130
Installing and Running decksh/pdfdeck
ajstarks
1
840
Yumika Yamada Portfolio
yumii
0
1.3k
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
4 Signs Your Business is Dying
shpigford
184
22k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
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