no-image

Vue.js始めて1週間ですがtrantisionやってみました。

Vue.js #4 Advent Calendar 2017の14日目のエントリです。
Vue.jsのAdventCalendarは人気で#4まで出てる次第ですが、 ちなみに#1~#4の全カレンダーで最後の最後に参加表明を出したのは僕です。(どうでもいい)

まず

Vue.js始めて1週間程度の初心者です。 Nuxt.js?Vuex?なにそれ美味しいの?って感じでほとんど何も知りません。 お手柔らかにお願いします・・。 

Vue.jsといえば

2,3ヶ月ほど前からReactをやっていたのですが、Vue.jsを触りだして思ったことは

 

  • 学習コストが低い
  • 周辺ライブラリが豊富
  • svgと相性が良い
  • アニメーションとの相性が良い

というイメージです。ぬるぬる動くの気持ち良いですよね。  

作ってみよ

雛形

というわけで作っていきます。 まず雛形です。Resultタブ内を御覧ください。 ピンクの円をクリックすると灰色の円とピンクの円が挿入されます。 ここにアニメーションを追加していきたいと思います。

 

transition-groupタグを使ってみます。

transition-groupの公式ドキュメントはこちら。 tagプロパティにdivを使い、nameプロパティをradiusとしました。 appearを付けると初期表示時にもアニメーションが適用されます。

transitionを適用させるためにscssにもそれ用のクラスと内容を追記します。

詳細は端折りますが、この辺については以下の記事が大変わかりやすかったのでご参考までに。 【参考】Vue.js でたのしいトランジション 通常編 | Cubix 注意するべき点「transition-group内は単一要素であること。」です。 つまり以下のようにするとエラーが出ます。

なので、こんな感じにすると良いです。

そしてできたものがこちらです!ばんっ!!

あれ、上手く動かないですね。アニメーションは適用されているし、思ったところに灰色の円が挿入されますが、 アニメーションが適用されているのが一番最後の円になっています。 なんで????  

keyを設定する

わからなすぎて夜も眠れなかったのでteratailに質問してみました。 30分経つ間もなく回答がつきました。 どうやらkeyの付け方に問題があるようです。 上のコードではv-forindexをkeyにしているので、 クリック時にindexの最後が追加されたのだと認識されるために、最後の円にアニメーションが適用されます。 今回はデータにちょうどユニークなidがあるのでそれをkeyに指定し直してみます。

うまくいきました。 ただ、ちょっとずれる動きがスムーズじゃないですね。  

Smoothにmoveしたい

scssの中のtransition: all 1s;の1行を .radius-item {}の中に移動してみます。

良い感じになってきました。  

transitionの入れ子

次にピンクと灰色の円を時間差で表示してみます。 ちなみに良い感じのアニメーションは以下のサイトを参考にしています。 【参考】Easing Function 早見表 transition-groupの中の一部にアニメーションを付けたいので、 そこをtransitionでさらに囲みました。

ここでも一つ注意する点があります。 vueのtransitionで要素を滑らかに移動する時にFLIPというアニメーションテクニックを使っているのですが、 これは、display: inlineが指定されていると動きません。 代わりにdisplay: inline-blockを使います。

【参考】Enter/Leave とトランジション一覧 – Vue.js コレを踏まえてピンクの円に時間差で表示させるようにしました。

 

transitionの入れ子の入れ子

クリック時のレスポンスエフェクトを加えてみました。それに伴ってdivをbuttonに変えました。 上の状態のままだとhoverは効くのですが、activeが効かなかったので再び入れ子にしました。

で、できたのがこちらです。

 

まとめ

入れ子もできるのですね!!変幻自在ですね!!なんでもできますね!!!
transitionのドキュメントを見ると「イベント」というのもあるのですね。
今はよくわかっていませんが、また使ってみたいと思います。