動的にコンテンツや要素などを切り替える際にアニメーションをつけたい時もあるかと思います。Vue.jsではそのような時のためにトランジションを使って手軽に効果をつけることができるものが用意されています。今回はVue.jsのtransitionタグを使ってアニメーションを実装するケースを見ていきたいと思います。  

transitionタグで要素にトランジション効果を加える

このtransitionタグですが、対象の要素を内包するように記述することで専用のclass名がトランジションの経過に合わせて動的に付与される仕組みになります。ただし、DOMの再描画が行われるタイミングでしか機能しないので注意が必要です。今回はサンプルとしてボタンのクリックで要素の表示と非表示が切り替わるような例で見ていきます。 【Vue】

<template>
 <div id="app">
  <button v-on:click="display_switch()">click!!</button>
  <div>ボタンクリックで表示・非表示が切り替わる要素です
  </div>
 </div>
</template>

<script>
 export default {
  data: function() {
   return {
    show: false
   }
  },
  methods: {
   display_switch: function() {
    this.show = !this.show
   }
  }
 }
</script>

  実装も簡単で、先ほどの通りアニメーションさせたい要素をtransitionタグで囲むだけでOKです。その後CSSなどでトランジション効果のスタイルを指定します。 【Vue】

<template>
 <div id="app">
  <button v-on:click="display_switch()">click!!</button>
  
  <transition>

   <div>ボタンクリックで表示・非表示が切り替わる要素です
   </div>

  </transition>
 
 </div>
</template>

<script>
..... 省略
</script>

<style lang="scss">
 .v-enter-active {
  transition: all 1.0s ease 0s;
 }
 .v-leave-active {
  transition: all 0.3s ease 0s;
 }
 .v-leave-active {
  position: absolute;
 }
 .v-enter,
 .v-leave-to {
  opacity: 0;
 }
 .v-enter {
  transform: translateX(-60px);
 }
 .v-enter-to,
 .v-leave {
  transform: translateX(0);
 }
 .v-leave-to {
  transform: translateX(60px);
 }
</style>

  実際に動くサンプルを用意しましたので見てみましょう。いかがでしょうか、こうして比べてみると違いがよくわかりますね。  

See the Pen Vue.js transition sample by designsupply (@designsupply) on CodePen.

先ほどCSSでスタイルを指定するとありましたが、トランジションの経過に合わせたclass名が自動で付与されますので、class名を把握しておく必要があります。下記にトランジション時に使われるclass名をまとめていますので、これらに合わせてスタイルを指定していきます。  

v-enter-active	要素が表示される間の状態で付与されるclass （要素のDOMへ追加〜Enterトランジションの実行）
v-enter	要素がDOMに追加される直前からEnterトランジションが始まるまでの間に付与されるclass
v-enter-to	Enterトランジションが始まり要素がDOMから削除されるまでの間に付与されるclass
v-leave-active	要素が削除される間の状態で付与されるclass （Leaveトランジションの実行〜要素のDOMから削除）
v-leave	Leaveトランジションが始まる直前までの間に付与されるclass
v-leave-to	Leaveトランジションが始まり終了するまでの間に付与されるclass

   

transitionタグのオプションでトランジションのタイミングを調整

トランジション効果でアニメーションを実装できるtransitionタグですが、トランジションのタイミングも指定することができます。デフォルトではEnterのトランジションとLeaveのトランジションが同時に始まりますが「mode」属性でオプションを指定することで変更が可能です。 【Vue】※一部抜粋

<transition mode="in-out">
</transition>

  mode属性で使えるオプションは下記のものが用意されています。指定しない場合にはデフォルトの仕様が適用されます。  

（デフォルト）	EnterのトランジションとLeaveのトランジションが同時に実行される
in-out	Enterのトランジションの終了後にLeaveのトランジションを実行する
out-in	Leaveのトランジションの終了後にEnterのトランジションを実行する

   

ループで複数の要素を出力している要素へのトランジション

v-forなどで複数要素がループで出力されている要素に対しては「transition-group」タグを使います。ただし下記の点に注意しておきましょう。 ・デフォルトでラッパー要素がspanになるので、指定のタグがある場合にはtag属性にて設定する。 ・v-forで展開する要素にはkey属性の指定が必須となる   実際のコードの例は次のようになります。これでループで動的に出力された要素に対しても全てトランジションが適用されるようになりました。 【Vue】※一部省略

<template>
 <div id="app">
  <transition-group tag="ul">
   <li v-for="item of items" v-bind:key="item.id">{{ item.name }}
   </li>
  <transition-group>
 </div>
</template>

 

---

  いかがでしょうか、Vue.jsでは動的にコンテンツやデータ、要素などが切り替わるためUIの観点からもアニメーションが求められるケースも多いかと思います。そんな時にはこのtransitionタグがとても便利ですね。