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
88
ド素人がLaravelを触って思ったこと
sanada_akira
0
1k
Other Decks in Design
See All in Design
Dive Deep into Communication
yomtsu
0
230
「デザイン」を信じるには
iflection
0
150
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
180
The Golden Whitney
ohtristanart
PRO
0
140
マンガで分かるサービスデザインガイドライン
senryakuka
1
710
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
310
Flow, Not Stock 知識触媒としてのIA
5kaichi
0
220
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
10k
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
290
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
120
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
840
(第1回) アーキテクト・テックリード育成講座
masakaya
0
200
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.4k
Why Our Code Smells
bkeepers
PRO
336
57k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
117
51k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Navigating Team Friction
lara
183
15k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
What's in a price? How to price your products and services
michaelherold
244
12k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
490
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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