【Vue.js】transitionタグでアニメーション効果をつける

Vue.jsの続きです。前回はwatch（監視プロパティ）で簡単なクイズを作りました。今回はtransitionタグというVue.jsの独自タグでアニメーション効果をつけます。それでは、いきましょう！

【目次】

※参考：【Vue.js】watch（監視プロパティ）で戦国時代クイズを作った - クモのようにコツコツと

transitionの書式（HTMLとCSS）

HTMLファイル内で、アニメーションさせたい要素をtransitionタグで囲う。

<transition>
    <!-- アニメーションさせたい要素を書く -->
</transition>

なお、複数のリストをアニメーションさせたいときはtransition-groupタグで囲う。

<transition-group>
    <!-- アニメーションさせたいリストを書く -->
</transition-group >

アニメーションはCSSで設定する。あらかじめ用意されたclass名がある。
要素がアニメーション中に属性に下記のclass名が追加される。

現れるアニメのclassはこの3つ。

/*現れる時*/
/*現れる前の状態*/
.v-enter { プロパティ: 値;}

/*現れる間の動き*/
.v-enter-active { プロパティ: 値;}

/*現れた後の状態*/
.v-enter-to { プロパティ: 値;}

消える時のclass名。

/*消える時*/
/*消える前の状態*/
.v-leave { プロパティ: 値;}

/*消えている間の動き*/
.v-leave-actiove { プロパティ: 値;}

/*消えた後の状態*/
.v-leave-to { プロパティ: 値;}

現れるときのenterがleaveになったバージョン。

移動させるときのclass名。

/*移動中*/
/*移動中の動き*/
.v-move { プロパティ: 値;}

それでは、実際に作ってみる。

アニメーションなしの状態

まず、下記がアニメーションをつけるまえの状態。

See the Pen vue transition 00 by イイダリョウ (@i_ryo) on CodePen.

名前を入れると下に「○○○と申します！」というセリフが現れる。

HTMLのコード

<div id="tony">
  <h1>トニーの部屋</h1>
  <p>「あなたのお名前なんて〜の？」</p>
  <hr>
  <input type="text" v-model="name" placeholder="お名前">
  <hr>
    <p v-if="name">「{{ name }}と申します！」</p>
</div>

• 外側のdivのid名はTony
• inputタグにv-model属性。値はname
• pタグのv-if属性。値はname。中にもマスタッシュタグでnameを埋め込み。

JSのコード

new Vue({
  el: '#tony',
  data: {
    name: ''
  }
});

• Vueいんすたんす作成。引数の中身は連想配列
• elキーの値が#tonyでdivと紐づいている
• dateキーの値は連想配列。nameキーの値は空欄（初期値）

これまでやってきたことと変わらない。これにアニメーションをつけたい。

アニメーションをつけた状態

アニメーションを付けたバージョン

See the Pen vue transition 01 by イイダリョウ (@i_ryo) on CodePen.

「○○○と申します！」というセリフがフワッと現れる。また、空欄にしたときもフワッと消える。

HTMLのコード

  <transition>
    <p v-if="name">「{{ name }}と申します！」</p>
  </transition>

• v-if属性の入ったpタグをtransitionタグで囲む。（ここをアニメーションさせる）

CSSのコードに下記を追記

.v-enter,
.v-leave-to {
  opacity: 0;
}

.v-enter-active,
.v-leave-active {
  transition: 1s;
}

• 現れる前と消えたあとのを透明（不透明度0）に
• 現れる間と消える間のアニメーションの長さを1秒（1s）に

JSのコードは変更なし。これでフワッとなった。

最後に

Vue.jsのアニメーションはこれまで書いてきた形にtransitionタグやCSS設定を追記するだけなので簡単でした！アニメーション部分をCSSにさせて、JSのイベントのトリガーに止めるのも最近のJSの傾向とマッチしていますね！

次回は、Vue.jsとGoogle Chartsを連携して、グラフの表示をやってみる予定。それではまた！

---

※参考：Vue.jsの習得のためにやったことまとめ
qiita.com