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

Transcript

1. アニメーション Vue.jsで しよう！
2. ⾃⼰紹介 真⽥ 明 クリエイティブスタジオ・ファボリータという屋号で 個⼈事業主してます。 仕事内容は、Web/グラフィックデザイン・Web開発。 真⽥明 デザイン 
3. みなさん、cssアニメーションをどうされてますか？
4. クラスを作って、on/offとかみたいに切り替える jQueryのanimate()を使ってフレームごと設定する その他cssやjsのアニメーションライブラリを使う   
5. もちろん…
6. Vueでもアニメーションができます！
7. Vueでアニメーションする場合 クラスを作ってVueで切り替え Transitionラッパーを使う サードパーティのアニメーションライブラリを使う   
8. どう使い分けるの？？？
9. Active状態のon/offを使う場合は クラスを作ってVueで切り替えるほうがよさそう Class属性をバインディングする 
10. 要素の有無の切り替えを使う場合は Transitionラッパーを使いましょう！ 要素を<transition></transition>でくくるだけ！ 
11. @keyframesを使ったcssアニメーションも Transitionを使いましょう！
12. jQueryのanimate()が恋しくてたまらない⽅は サードパーティのライブラリを使いましょう！ Velocity.js TweenMax などなど
13. その他Vueでアニメーションを使う場合 Vuex カスタムディレクティブ ウォッチャー でもできるらしい…
14. ドキュメント vue transition 
15. デモで作ったリポジトリ https://github.com/bje0696/vue_animation