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
350
Vue.jsでアニメーションしよう!
Sanadi
January 29, 2020
Tweet
Share
More Decks by Sanadi
See All by Sanadi
生きデザ横丁_真田LT
sanada_akira
0
76
ド素人がLaravelを触って思ったこと
sanada_akira
0
950
Other Decks in Design
See All in Design
Sociotechnical design for software and human systems
xinyao
2
490
スタートアップ創業時の CXOのお仕事
tsuyoshika
0
1.5k
デザイナー向け会社紹介資料/company-profile-designer
nextbeat
1
870
Speaker DeckにおけるGoogleスライドのフォントの問題解決/problem solving for google slides 2023
moriyuya
31
2.6k
プロダクトデザイン部 組織紹介(デザイナー向け)
chatwork_hr
1
230
231129_FOSS4G-ASIA-2023_kato
hjmkth
1
300
Designing UIs without a UI designer
strongeron
0
120
ゲームクリエイター、事業会社のデザイナーになる
satomium1
0
180
Installing and Running decksh/pdfdeck
ajstarks
1
490
現象と向き合うデザイン @Spectrum Tokyo Festival 2023
hirokazu_oda
3
1.3k
The Fight
euralisw
0
110
生成AIを活用したサービス設計のススメ〜仮説構築編〜
tomo1215
1
120
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
659
120k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
Writing Fast Ruby
sferik
621
60k
Designing the Hi-DPI Web
ddemaree
276
33k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
The Language of Interfaces
destraynor
151
23k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Designing Experiences People Love
moore
136
23k
Navigating Team Friction
lara
178
13k
The Pragmatic Product Professional
lauravandoore
25
5.8k
What the flash - Photography Introduction
edds
64
11k
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