Vue.js アニメーション機能を使う

vue.jsに標準で備わっているアニメーション機能

要素の追加や削除などでただ表示を変更するのではなく、スライドや、フェードイン/フェードアウトなどアニメーションを利用しユーザー体験をあげることができる機能がvue.jsには標準で備わっているのでその機能を使ってみる。

slidedown/upを使い要素を表示する

まずはボタンがクリックされた場合、アニメーションの対象の要素がslidedownで表示され、もう一度ボタンをクリックしたときにslideupで消えていく機能を実装する。

表示側

<div id="app">
  <input type="button" value="表示/非表示" v-on:click="onclick">
  <transition>
    <div id="main" v-show="flag">トランジションを使いアニメーションを実装する</div>
  </transition>
</div>

表示側に必要なことは「transition」要素でアニメーションによって表示切り替えをしたい要素を囲うこと。このとき注意しなくてはいけない点は、「transition要素の配下に指定できるのは一つの要素のみ」ということ。divタグが同列に並ぶような構造をtransitionの中に作ってしまうと警告が出ます。

Vue側

Vue.createApp({
  data: function() {
    return {
      flag: false
    }
  },
  methods: {
    onclick(){ 
      this.flag = !this.flag
    }
  }
  }).mount('#app')

Vue側は至ってシンプルな構造。表示側のtransition要素を表示するかしないかを判定するため「flag」とボタンクリックによって「flag」を切り替えるメソッドを準備するだけです。

CSS

#main{
  border: 1px solid #000;
  width: 350px;
  overflow: hidden;
}

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

.v-enter-from, .v-leave-to{
  height: 0px;
}

.v-enter-to, .v-leave-from {
  height: 100px;
}

アニメーション機能を実現する部分の多くはこのCSSファイルです。

一番上の「#main」は通常のcssの記述で、アニメーションに必要なのはそれ以外部分です。

• .v-enter-active

  このクラスはアニメーションを付与する要素を表示するときに対象の要素に付与されるクラスです。

• .v-leave-active

  このクラスはアニメーションを付与する要素を非表示するときに対象の要素に付与されるクラスです。

上記二つのクラスに対して記述されている

transition: height 1s;

というプロパティは表示/非表示の変化をどのように行うかを定めている部分です。

表示側で使用したtransition要素を指定: 変化させる属性 変化させるスピード（秒数指定）;   

その他、cssで指定しているクラスの意味

• v-enter-from

  要素を表示し始めた時の状態を指定

• v-enter-to

  要素を表示し終わった時の状態を指定

• v-leave-from

  要素を非表示にし始める時の状態を指定

• v-leave-to

  要素を非表示にし終わったときの状態を指定

slidedown/upでは表示と非表示は全く逆の動作となるため「v-enter-active, v-leave-from」「v-enter-to, v-leave-to」と一括りにしています。

keyframesによるアニメーション制御

アニメーションには、「CSS Transition」と「CSS Animation」と二つの種類がある。

「CSS Transition」は先程のslidedown/up の方法で比較的シンプルな実装と表示ができるもの。

「CSS Animation」はもう少し細かい設定ができ表示もよりリッチになる方法。

「CSS Animation」を使用する時は kyeframeを使いCSSファイルで細かい設定を行う。

先程のslidedown/upで使用した、HTML、Vue.jsをそのまま利用しCSS側だけを変更することによって表示方法に変化をつける。

CSS

#main{
  border: 1px solid #000;
  width: 350px;
  overflow: hidden;
}

@keyframes slide-in {
  0%{
    transform: translateX(100%);
  }
  10%{
    transform: translateX(20%);
  }
  100%{
    transform: translateX(0%);
  }
}
.v-enter-active {
  animation: slide-in 1.5s;
}

.v-leave-active {
  animation: slide-in 1.5s reverse;
}

@keyframes　slide-inとしているのは変化させる一連の状態に名前をつけています。あとで出てくるv-enter-active、v-leave-activeでここでつけた名前を使用します。

keyframesの中には

0% {
  transform: translate
}

という表記がありますが、これは「変化を起こしたている時の途中の状態」を% で表し、その中身として「その％の時にどのような状態であるか」を記述いているものです。今回の場合は、表示する状態になってから、0%,10%と左にスライドしていき100%の状態で本来その要素が表示されるべき場所におさまる、というような実装になっています。

最後に、slidedown/upでも登場したv-enter-active、 v-leavea-ctiveの中身ですが、

animation: slide-in 1.5s;

animation: slide-in 1.5s reverse;

アニメーションを行う: keyframesで作成したslide-inを使う　　変化にかける時間;

アニメーションを行う: keyframesで作成したslide-inを使う　　変化にかける時間 表示する時の変化とは逆の手順で変化される;

というようなことを書いています。