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
2. Name: @daitasu 2 Job: Frontend-Engineer Company: PERSOL Community: YOUTH TECH
3. 3 YOUTH TECH https://youthtechtokyo.peatix.com/ 20代 × IT
4. Vueを使うときの CSSアニメーションについて 4
5. 通常のCSSアニメーション 5 ・animationプロパティと@keyframesを使う ・cssだけでアニメーションできる ・animationプロパティでnameを指定 ・@keyframesで始点と終点の状態を決める
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: 再生・停止を指定
7. CSSアニメーション 8つのプロパティ 7 ・animation: 8つのプロパティの一括指定もできる
8. Vueでtransitionする際はEnter/Leaveを使う 8
9. Vueを使った場合のCSSアニメーション 9 ・コンポーネントの描画/消滅時に自動でclassが追加 ・v-if/v-showや動的コンポーネントなどの切り替え時
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の終了状態
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
12. Vue transitionが向いてないもの 12 状態のtransition ・ 常に表示され続けるもの ・ class名の変化 ・位置やサイズが変化するもの ・ 数値計算によるデータ変化
13. Javascript Hook 13 ・ Enter/Leaveの各タイミングでメソッド呼び出しができる ・ DOM要素を直接操作可能
14. jsライブラリと組み合わせる 14 円運動など凝った動きができる (Velocity.jsと組み合わせた場合)
15. 他にも色々... 15 ・ transition group ・ transition mode 公式Docのサンプルが豊富
16. ところで... 16 これなにかに似てないですか？
17. ところで... 17 これなにかに似てないですか？
18. ところで... 18 これなにかに似てないですか？
19. ところで... 19 これなにかに似てないですか？ 原子核
20. 20 元素記号表
21. 21 作ってみた
22. 22 デモ
23. 23 原子、走ります
24. 24 Atoms Dash!! ・Atomic DesignでAtomを作ってみたかった ・Nuxt.js + Vuetify (フロントのみ) ・キャラクター選択で好きな原子を選べる ・うねうねしながら走る(障害物レース) ・当たり判定などがまだ出来てないためまだ未公開
25. 25 Coming Soon ... 4月くらいにQiita書くのでよかったら遊んでください !!