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

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

daitasu
March 22, 2019
120

 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. 20
    元素記号表

    View full-size slide

  21. 21
    作ってみた

    View full-size slide

  22. 23
    原子、走ります

    View full-size slide

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

    View full-size slide

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

    View full-size slide