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
90
ド素人がLaravelを触って思ったこと
sanada_akira
0
1.1k
Other Decks in Design
See All in Design
Liquid Iron
mcduckyart
1
120
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
150
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
140
AI時代に淘汰されないデザインのしごと
akinen
1
170
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
620
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
120
AI動画生成ガチャ紹介
piyo7
1
190
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
120
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
450
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
440
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
150
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.6k
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.8k
Unsuck your backbone
ammeep
671
58k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
800
The Cult of Friendly URLs
andyhume
79
6.5k
Music & Morning Musume
bryan
46
6.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
KATA
mclloyd
32
14k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Facilitating Awesome Meetings
lara
54
6.5k
Automating Front-end Workflow
addyosmani
1370
200k
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