Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Vue.jsでアニメーションしよう!
Search
Sanadi
January 29, 2020
Design
390
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Vue.jsでアニメーションしよう!
Sanadi
January 29, 2020
Transcript
15 slides
アニメーション 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
More Decks by Sanadi
See All by Sanadi
生きデザ横丁_真田LT
sanada_akira
0
120
ド素人がLaravelを触って思ったこと
sanada_akira
0
1.1k
Other Decks in Design
See All in Design
デザインワークフローの最前線。 ログラスでのAI活用の現在地
ukaoli
1
3.7k
AI-Slopなデザインを生まないためのデザインプロセス戦略
takanorip
10
6.6k
富山デザイン勉強会_生成AIを使ったデザイン制作2026最新版.pdf
keita_yoshikawa
0
210
言語化しきれなくてもいい〜勉強会を「完璧な成果を出す場」から「不確実な刺激と体験を持ち帰る場へ〜
hott3
0
220
Spectrum Tokyo Meetup #26「できることが増えた時、デザイナーは何に時間を使うべきか」
muture
PRO
1
400
ひとりで作れる時代に、 判断をみんなで持つには。/ Build alone share judgment
kgsi
1
940
日経電子版を支えていく Kasane Design System
taitotnk
0
600
コールセンターのオペレーターに6時間だけなってみた
h0sa
0
470
トランジションの冒険 自分と世界を変える冒険の書 / Transition Adventure
dmattsun
2
910
東京都市大学 都市生活学部×一般社団法人オープン企画イベント 「誰もがデザイナーである」とはどういうことか? 【エツィオ・マンズィーニ氏 特別来日・基調講演】
a2k
1
170
デザインハーネスはじめの一歩
satty9556
1
1.9k
エンジニア経験0のデザイナーが アプリを0からリリースまで 作ってみる
abokadotyann
2
500
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
529
40k
The Curious Case for Waylosing
cassininazir
1
610
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
370
Git: the NoSQL Database
bkeepers
PRO
433
67k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
123
22k
How to Ace a Technical Interview
jacobian
280
24k
brightonSEO & MeasureFest 2025 - Winning Strategies for Black Friday CRO & PPC - Christian Goodrich
cargoodrich
3
890
Mobile First: as difficult as doing things right
swwweet
225
10k
Claude Code のすすめ
schroneko
67
230k
How STYLIGHT went responsive
nonsquared
100
6.4k
A designer walks into a library…
pauljervisheath
211
25k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
400