Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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
96
ド素人がLaravelを触って思ったこと
sanada_akira
0
1.1k
Other Decks in Design
See All in Design
CursorでAI活用のナレッジベースを構築する
kanzaki
0
1.1k
モビリティプラットフォームの未来を築くクラウド基盤
kossykinto
0
160
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
620
図じゃなく言語で描く - Common Ground for Design AI Operations.
kazukiikeda
1
580
DMMデザイナーの “AI活用の現在と未来”
takumasaito
1
230
ユーザー像を「みてね」らしく可視化する 家族アルバムみてねUXリサーチチームの取り組み
mixi_design
PRO
3
610
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
techtekt
PRO
7
1.4k
デザインを信じていますか
sekiguchiy
1
730
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
230
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
hiromitsuuuuu
1
1.1k
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
mkasumi
0
1k
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
designer_no_pon
0
890
Featured
See All Featured
Navigating Weather and Climate Data
rabernat
0
53
Designing Experiences People Love
moore
143
24k
WENDY [Excerpt]
tessaabrams
8
35k
AI: The stuff that nobody shows you
jnunemaker
PRO
1
22
Building the Perfect Custom Keyboard
takai
1
660
Scaling GitHub
holman
464
140k
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
94
Code Review Best Practice
trishagee
74
19k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Side Projects
sachag
455
43k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.7k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
310
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