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

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

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

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

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

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

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

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

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

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の終了状態 

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

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

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

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

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

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

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

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

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

20 元素記号表 

21 作ってみた 

22 デモ 

23 原子、走ります 

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

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