Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

daitasu
March 22, 2019
110

 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

daitasu

March 22, 2019
Tweet

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