エンジニアのひよこ_level10

【毎日更新!】新卒3年目エンジニアブログです! プログラムだけじゃなく、マネジメントとかも書いていきたい!

【Vue】Vueの勉強始めようpart9(transitionでアニメーション管理)【537日目】

前回

www.nyamucoro.com

参考書籍

実際のコード

■プルリクエス

単一トランジション実装 by klack710 · Pull Request #24 · klack710/study-vue · GitHub

■作ったもの(ブランチはmaster参照なので、今後も更新されます)

(2019/04/04時点では、今回の内容は含まれていないです!)

klack710.github.io

今回やったことは?

f:id:willow710kut:20190404012728g:plain

  1. transitionでモーション生成
  2. transitionにnameで複数パターン作成
  3. ボタンで表示切り替え

学んだメモ

transitionにnameをつけることで、transitionの種類を増やしたい時に有効。

右に動くtransitionと、左に動くtransitionとかね!

感想は?

楽しい・・・!とにかく楽しい。

まだ公開してませんが、ぽちぽち動くのを見てるだけで超楽しいです。

CSSが凄いって話のはずなんだけど、簡単に管理出来るのがいいところ。

他の人に書いてもらう時に『これ使うといいよ』というのがわかりやすいのもいいね。
CSSとクラスで書くと、あっちこっちに書かれてしまう未来が見えるからこれはよさそう。

ただ、CSS都合のものをHTMLタグと一緒に書くというところがもやっとしてなくはない、、、!
実際にtransitionタグを現場で使っている人いるのかな?