Vue.jsでアニメーションしよう！

Slide 1

Slide 1 text

アニメーション Vue.jsでしよう！

Slide 2

Slide 2 text

⾃⼰紹介真⽥明クリエイティブスタジオ・ファボリータという屋号で個⼈事業主してます。仕事内容は、Web/グラフィックデザイン・Web開発。真⽥明デザイン 

Slide 3

Slide 3 text

みなさん、cssアニメーションをどうされてますか？

Slide 4

Slide 4 text

クラスを作って、on/offとかみたいに切り替える jQueryのanimate()を使ってフレームごと設定するその他cssやjsのアニメーションライブラリを使う   

Slide 5

Slide 5 text

もちろん…

Slide 6

Slide 6 text

Vueでもアニメーションができます！

Slide 7

Slide 7 text

Vueでアニメーションする場合クラスを作ってVueで切り替え Transitionラッパーを使うサードパーティのアニメーションライブラリを使う   

Slide 8

Slide 8 text

どう使い分けるの？？？

Slide 9

Slide 9 text

Active状態のon/offを使う場合はクラスを作ってVueで切り替えるほうがよさそう Class属性をバインディングする 

Slide 10

Slide 10 text

要素の有無の切り替えを使う場合は Transitionラッパーを使いましょう！要素をでくくるだけ！ 

Slide 11

Slide 11 text

@keyframesを使ったcssアニメーションも Transitionを使いましょう！

Slide 12

Slide 12 text

jQueryのanimate()が恋しくてたまらない⽅はサードパーティのライブラリを使いましょう！ Velocity.js TweenMax などなど

Slide 13

Slide 13 text

その他Vueでアニメーションを使う場合 Vuex カスタムディレクティブウォッチャーでもできるらしい…