Vueでのアニメーションの話

2019/03/22
We are Javascripters@30th (https://wajs.connpass.com/event/122984/ )でお話しした内容です。

スライド内にgifがあり、speaker deckだと表示できないため、google slideに原本を置いています。
https://docs.google.com/presentation/d/1hiZ6GkQpSbDosnoLH_DXYQt1PiWVnZgn0YdQDfHyKNk/edit?usp=sharing

Transcript

1. VueでのCSSアニメーションの話
   @daitasu
   1
   We Are Javascripters @30th
   2019-03-22
   

   View Slide

2. Name: @daitasu
   2
   Job: Frontend-Engineer
   Company: PERSOL
   Community: YOUTH TECH
   

   View Slide

3. 3
   YOUTH TECH
   https://youthtechtokyo.peatix.com/
   20代 × IT
   

   View Slide

4. Vueを使うときの
   CSSアニメーションについて
   4
   

   View Slide

5. 通常のCSSアニメーション
   5
   ・animationプロパティと@keyframesを使う
   ・cssだけでアニメーションできる
   ・animationプロパティでnameを指定
   ・@keyframesで始点と終点の状態を決める
   

   View Slide

6. CSSアニメーション 8つのプロパティ
   6
   ・animation-name: @keyframesに使う名前
   ・animation-duration: 継続時間
   ・animation-timing-function: 進行の度合
   ・animarion-delay: 始まるまでの時間
   ・animation-iteration-count: 繰り返し回数
   ・animation-direction: 再生方向
   ・animation-fill-mode:
   　　　　　　　開始/終了時のスタイル指定
   ・animation-play-state: 再生・停止を指定
   

   View Slide

7. CSSアニメーション 8つのプロパティ
   7
   ・animation: 8つのプロパティの一括指定もできる
   

   View Slide

8. Vueでtransitionする際はEnter/Leaveを使う
   8
   

   View Slide

9. Vueを使った場合のCSSアニメーション
   9
   ・コンポーネントの描画/消滅時に自動でclassが追加
   ・v-if/v-showや動的コンポーネントなどの切り替え時
   

   View Slide

10. Vue Transitionの6つのclass
    10
    コンポーネントの挿入時, 削除時の各状態で6つのclassが付与される
    ・v-enter: enterの開始状態
    ・v-enter-active: enterの活性状態
    ・v-enter-to: enterの終了状態
    ・v-leave: leaveの開始状態
    ・v-leave-active: leaveの活性状態
    ・v-leave-to: leaveの終了状態
    

    View Slide

11. Custom transition class
    11
    6つのclassは指定したclass名でオーバーライドできる
    他のanimationライブラリと組み合わせる特に便利
    ・enter-class
    ・enter-active-class
    ・enter-to-class
    ・leave-class
    ・leave-active-class
    ・leave-to-class
    

    View Slide

12. Vue transitionが向いてないもの
    12
    状態のtransition
    ・ 常に表示され続けるもの
    ・ class名の変化
    ・位置やサイズが変化するもの
    ・ 数値計算によるデータ変化
    

    View Slide

13. Javascript Hook
    13
    ・ Enter/Leaveの各タイミングでメソッド呼び出しができる
    ・ DOM要素を直接操作可能
    

    View Slide

14. jsライブラリと組み合わせる
    14
    円運動など凝った動きができる
    (Velocity.jsと組み合わせた場合)
    

    View Slide

15. 他にも色々...
    15
    ・ transition group
    ・ transition mode
    公式Docのサンプルが豊富
    

    View Slide

16. ところで...
    16
    これなにかに似てないですか？
    

    View Slide

17. ところで...
    17
    これなにかに似てないですか？
    

    View Slide

18. ところで...
    18
    これなにかに似てないですか？
    

    View Slide

19. ところで...
    19
    これなにかに似てないですか？
    原子核
    

    View Slide

20. 20
    元素記号表
    

    View Slide

21. 21
    作ってみた
    

    View Slide

22. 22
    デモ
    

    View Slide

23. 23
    原子、走ります
    

    View Slide

24. 24
    Atoms Dash!!
    ・Atomic DesignでAtomを作ってみたかった
    ・Nuxt.js + Vuetify (フロントのみ)
    ・キャラクター選択で好きな原子を選べる
    ・うねうねしながら走る(障害物レース)
    ・当たり判定などがまだ出来てないためまだ未公開
    

    View Slide

25. 25
    Coming Soon ...
    4月くらいにQiita書くのでよかったら遊んでください !!
    

    View Slide