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
86
ド素人がLaravelを触って思ったこと
sanada_akira
0
1k
Other Decks in Design
See All in Design
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8.4k
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
130
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
520
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
270
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
240
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
210
世界中のチームワークをどうデザインしているのか
ka3zu1ma10
0
280
最速[要出典]アクセシビリティチェック
magi1125
2
200
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
67k
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
390
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
240
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
Code Review Best Practice
trishagee
66
17k
A designer walks into a library…
pauljervisheath
205
24k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Typedesign – Prime Four
hannesfritz
40
2.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Rails Girls Zürich Keynote
gr2m
94
13k
Building Applications with DynamoDB
mza
93
6.2k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Unsuck your backbone
ammeep
669
57k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
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