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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Sanadi
January 29, 2020
Design
0
380
Vue.jsでアニメーションしよう!
Sanadi
January 29, 2020
Tweet
Share
More Decks by Sanadi
See All by Sanadi
生きデザ横丁_真田LT
sanada_akira
0
96
ド素人がLaravelを触って思ったこと
sanada_akira
0
1.1k
Other Decks in Design
See All in Design
プロダクトリニューアルと同時に進める初めてのデザインシステム
techtekt
PRO
0
430
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
bengo4com
1
1.4k
「自分の仕事はどこまで?」と問い続けたら。デザイナーの「視座」を考える
mukai_takeru
0
300
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
muture
PRO
0
410
BXデザイン組織が挑んだスクラム 〜ブランドを育み、デザイナーを解放する変革の物語〜(Scrum Fest Mikawa 2025)
tadashiinoue
0
1.2k
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
goodpatch
3
3.1k
Franks Myth
gfht1
1
400
Goodpatch Tour💙 / We are hiring!
goodpatch
31
1M
デザイナーとエンジニアで 同じ山に登ろう
moco1013
0
110
Vibe Coding デザインシステム
poteboy
3
1.6k
ドルちゃん
design_dolphins
0
540
decksh object reference
ajstarks
2
1.5k
Featured
See All Featured
BBQ
matthewcrist
89
10k
Designing for Performance
lara
610
70k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
9.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.2k
Chasing Engaging Ingredients in Design
codingconduct
0
110
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
53
KATA
mclloyd
PRO
34
15k
The Curse of the Amulet
leimatthew05
1
8k
WCS-LA-2024
lcolladotor
0
430
Test your architecture with Archunit
thirion
1
2.1k
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
130
Visualization
eitanlees
150
17k
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