Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue.jsでアニメーションしよう!
Search
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
95
ド素人がLaravelを触って思ったこと
sanada_akira
0
1.1k
Other Decks in Design
See All in Design
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.5k
DESIGNEAST 2025 A-3
_kotobuki_
0
110
Ralph Penel Portfolio
ralphpenel
PRO
0
110
Findyのプロデチームの 歩みとこれから
satty9556
0
340
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
340
【Designship 2025|10.11】デザイン組織と事業貢献、その挑戦と結果。
payatsusan213
1
810
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
1.6k
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
hiromitsuuuuu
1
1k
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
220
TWCP#21 UXデザインと哲学のはなし
shinn
0
130
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
kinomidesign
0
130
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
170
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.8k
A designer walks into a library…
pauljervisheath
210
24k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
360
Building a Scalable Design System with Sketch
lauravandoore
463
34k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Side Projects
sachag
455
43k
Being A Developer After 40
akosma
91
590k
Bash Introduction
62gerente
615
210k
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