第23回　Vue.js入門　トランジションアニメーション

こんにちは、コンスキです。

今回はトランジションアニメーションについて解説していきます。

トランジションアニメーションとは
設定方法
- 複数の<transition>要素を使いたいとき
まとめ

トランジションアニメーションとは

Vue.jsにおけるトランジションアニメーションとは、HTMLの要素またはコンポーネントの追加や削除などが行われたときに、要素に動きを付けて表示と非表示を切り替えたり、なめらかに要素の表示と非表示を切り替えたりするアニメーションのことです。

HTMLの要素とコンポーネントの追加や削除（表示や非表示）が指しているのは次のような場合です。

v-ifディレクティブの属性値の変更（falseからtrue、trueからfalse）
v-showディレクティブの属性値の変更
動的コンポーネントのis属性の属性値の変更

設定方法

トランジションとは、とある状態から違う状態への変化をなめらかにすることを意味しています。

そのため、トランジションアニメーションを要素につけるには、「変化する前の状態」と「変化した後の状態」と「どのように変化するのか」という３つのことを設定しておく必要があります。

この３つの設定を、スタイルとしてcssに書いておきます。要素にclassを付けたり外したりすることでそのスタイルを変更して、トランジションアニメーションを要素につける事ができます。

そのようなclassのことトランジションclassといいます。

トランジションclassには、次のようなものがあります。

class名	スタイルの内容
v-enter	要素が表示される前のスタイル
v-enter-to	要素が表示された後のスタイル
v-enter-active	v-enterからv-enter-toにどのように変化するかを設定するスタイル
v-leave	要素が非表示になる前のスタイル
v-leave-to	要素が非表示になった後のスタイル
v-leave-active	v-leaveからv-leave-toにどのように変化するかを設定するスタイル

「変化する前の状態」と「変化した後の状態」と「どのように変化するか」の３つの設定をスタイルで設定すると言いましたが、要素が表示されるときの設定と要素が非表示にされるときの設定を合わせると６つのスタイルを設定することになります。

.v-enter {
  要素が表示される前のスタイル
}
.v-enter-to {
  要素が表示された後のスタイル
}
.v-enter-active {
  v-enterからv-enter-toにどのように変化するか
}
.v-leave {
  要素が非表示にされる前のスタイル
}
.v-leave-to {
  要素が非表示にされた後のスタイル
}
.v-leave-active {
  v-leaveからv-leave-toにどのように変化するか
}

スタイルが共通しているclassはまとめて書いても大丈夫です。

.v-enter,
.v-leave-to {
  要素が表示される前と要素が非表示にされた後のスタイル
}

.v-enter-to,
.v-leave-leave {
  要素が表示された後と要素が非表示にされる前のスタイル
}

.v-enter-active,
.v-leave-active {
  v-enterからv-enter-toにどのように変化するかとv-leaveからv-leave-toにどのように変化するか
}

classごとのスタイルを設定したら次はHTMLとJavaScriptの方に必要なものを書きます。

まず、トランジションアニメーションをつける要素やコンポーネントを<transition>要素で囲みます。

<transition>
  <!--ここにトランジションアニメーションを付けたい要素やコンポーネントを書きます-->
</transition>

次に、<transition>要素で囲んだ要素やコンポーネントに、表示を切り替えるディレクティブや属性を書きます。

今回は、なるべく簡単に記述できるように、v-ifディレクティブの属性値をv-onディレクティブのクリックイベントが発生したときに、要素の表示・非表示を切り替える場合で説明します。

html側↓

<div id="app">
  <button v-on:click="キー = !キー"></button>
  <transition>
    <要素名 v-if="表示非表示を決めるプロパティのキー"></要素名>
  </transition>
</div>

Javascript側↓

var vm = new Vue({
  el: "#app",
  data: {
    キー: false
  }
})

これで、<button>要素をクリックして、要素の表示と非表示を切り替えれば、スタイルを設定したclassが付け外しされて、トランジションアニメーションが有効になります。

ここからは、具体的な例を使ってトランジションアニメーションの設定方法を説明します。

まず、６つのクラスのスタイルを設定します。

.v-enter-active,
.v-leave-active {
  transition: opacity 500ms ease;
}

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

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

つぎに、htmlファイルに下のように書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>トランジションアニメーション</title>
  <script src="https://unpkg.com/vue"></script>
  <link rel="stylesheet" href="./css/sample101.css">
</head>
<body>
  <div id="app">
    <button v-on:click="isVisible = !isVisible">表示・非表示</button>
    <transition>
      <h1 v-if="isVisible">トランジションアニメーション</h1>
    </transition>
  </div>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {
        isVisible: false
      }
    })
  </script>
</body>
</html>

ここまでの設定をすると次のようなトランジションアニメーションを要素につけることができます。分かりづらいかもしれませんが、徐々に表示されて徐々に非表示になるアニメーションが付いています。

複数の<transition>要素を使いたいとき

１つの要素に対してだけでなくて、<transition>要素をたくさん使って複数の要素に対してトランジションアニメーションを付けたいときがあると思います。

そのようなときに複数の要素をすべて同じ<transition>要素で囲んでしまうと、それらの要素には１つのトランジションアニメーションしか有効にさせることしかできません。

複数の要素に異なるアニメーションを有効にさせたいときには、<transition>要素にname属性をつけることで、それぞれの要素を区別してアニメーションを効かせることができます。

<transition name="名前１">
  <要素名１></要素名１>
</transition>
<transition name="名前２">

  <要素名２></要素名２>
</transition>

上のようにname属性をつけると、要素に付け外しされるクラス名が変更されます。

これまでは、「v-enter」や「v-leave」というように、class名のはじめに「v-」が付いていました。

しかし、name属性を付けた場合、name属性の属性値がclass名のはじめに付けられて、「name属性の属性値-enter」や「name属性の属性値-leave」のようなclass名が要素に付け外しされます。

そのため、違うアニメーションを付けたい要素ごとに6つのclassのスタイルを設定することで、別々のアニメーションを有効にさせることができます。

.名前１-enter {
  要素１が表示される前のスタイル
}
.名前１-enter-to {
  要素１が表示された後のスタイル
}
.名前１-enter-active {
  要素１がv-enterからv-enter-toにどのように変化するか
}
.名前１-leave {
  要素１が非表示にされる前のスタイル
}
.名前１-leave-to {
  要素１が非表示にされた後のスタイル
}
.名前１-leave-active {
  要素１がv-leaveからv-leave-toにどのように変化するか
}
.名前２-enter {

  要素２が表示される前のスタイル
}
.名前２-enter-to {
  要素２が表示された後のスタイル

}
.名前２-enter-active {
  要素２がv-enterからv-enter-toにどのように変化するか
}
.名前２-leave {
  要素２が非表示にされる前のスタイル
}
.名前２-leave-to {
  要素２が非表示にされた後のスタイル
}
.名前２-leave-active {
  要素２がv-leaveからv-leave-toにどのように変化するか
}

例として、２つ<transition>要素を使って見ます。

１つ目の<transition>要素では、先程のフェードインフェードアウトのアニメーションをつける要素を囲み、name属性の属性値を「fade」にします。

<transition name="fade">
    <h1 v-if="isVisible">フェードインフェードアウト</h1>
</transition>

２つ目は、左からスライドして表示するアニメーションをつける要素を囲み、name属性の属性値を「slide」にします。

<transition name="slide">
    <h1 v-if="isSeen">スライドイン</h1>
</transition>

<transition>要素に囲まれた、この２つの要素の表示非表示を切り替えられるようにボタンも作ると、HTML全体は次のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>トランジションアニメーション</title>
  <script src="https://unpkg.com/vue"></script>
  <link rel="stylesheet" href="./css/sample104.css">
</head>
<body>
  <div id="app">
    <button v-on:click="isVisible = !isVisible">表示・非表示</button>
    <transition name="fade">
        <h1 v-if="isVisible">フェードインフェードアウト</h1>
    </transition>
    <br>
    <button v-on:click="isSeen = !isSeen">表示・非表示</button>
    <transition name="slide">
        <h1 v-if="isSeen">スライドイン</h1>
    </transition>
  </div>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {
        isVisible: false,
        isSeen: false
      }
    })
  </script>
</body>
</html>

今回は、アニメーションをつける２つの要素に別のclassを付け外しすることになります。

そのために、そのclassに対するスタイルをつぎのようにclassごと別々に設定します。

/* name属性が「fade」の<transition>要素の中身につけ外しするクラスに対するスタイル */
.fade-enter-active, .fade-leave-active {
  transition: opacity 500ms ease;
}

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

.fade-enter-to, .fade-leave {
  opacity: 1;
}

/* name属性が「slide」の<transition>要素の中身につけ外しするクラスに対するスタイル */
.slide-enter-active, .slide-leave-active {
  transform: translate(0px, 0px);
  transition: transform 700ms ease 0ms;
}

.slide-enter, .slide-leave-to {
  transform: translateX(-100vw) translateX(0px);
}

ここまでの設定をすると、次のように２つの要素に異なるトランジションアニメーションをつけることができます。