見出し画像

Vue.js 入門 (6) - トランジション

npaka

Vue.jsの「トランジション」の使い方をまとめました。

・Vue 2.6.14

前回

1. トランジション

「トランジション」は、要素の色や大きさなどの数値設定を連続的に変化させて、アニメーションさせる機能です。

「Vue.js」は、DOMへの要素の追加・更新・削除時に「トランジション」を適用する方法をいくつか提供しています。

2. CSSトランジション

CSSトランジションの例は、次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <!-- テンプレート -->
  <div id="app">
    <button v-on:click="show=!show">表示・非表示</button>
    <transition name="fade">
      <div v-if="show">Hello Vue!</div>
    </transition>
  </div>

  <!-- スクリプト -->
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        show: true
      }
    })
  </script>
  
  <!--スタイル-->
  <style>
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to {
      opacity: 0;
    }
  </style>  
</body>
</html>

◎ CSSトランジション
テンプレートでトランジションを適用する要素を<transition></transition>で囲み、CSSでどのようにトランジションするかを指定します。

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

CSSトランジションのスタイルは、次の6つです。

・名前-enter : Enter開始前
・名前-enter-to : Enter終了時
・名前-enter-active : Enter実行時
・名前-leave : Leave開始前
・名前-leave-to : Leave終了時
・名前-leave-active : Leave実行時

今回は、Enter開始前とLeave終了時を透明度0（opacity: 0
}）、Enter実行時とLeave実行時に0.5秒の透明度のトランジション（transition: opacity .5s）を指定します。

実行結果は、次のとおりです。

画像1

3. CSSアニメーション

CSSアニメーションの例は、次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <!-- テンプレート -->
  <div id="app">
    <button v-on:click="show=!show">表示・非表示</button>
    <transition name="bounce">
      <div v-if="show">Hello Vue!</div>
    </transition>
  </div>

  <!-- スクリプト -->
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        show: true
      }
    })
  </script>
 
  <!--スタイル-->
  <style>
    .bounce-enter-active {
      animation: bounce-in .5s;
    }
    .bounce-leave-active {
      animation: bounce-in .5s reverse;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      50% {
        transform: scale(1.5);
      }
      100% {
        transform: scale(1);
      }
    }
  </style>  
</body>
</html>

実行結果は、次のとおりです。

画像1

4. JavaScriptフック

JavaScriptフックの例は、次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <!-- テンプレート -->
  <div id="app">
    <button v-on:click="show=!show">表示・非表示</button>
    <div>{{message}}</div>
    <transition name="fade"
      v-on:before-enter="onStartAnim"
      v-on:before-leave="onStartAnim"
      v-on:after-enter="onStopAnim"
      v-on:after-leave="onStopAnim">
      <div v-if="show">Hello Vue!</div>
    </transition>
  </div>

  <!-- スクリプト -->
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        show: true,
        message: ""
      },
      methods: {
        onStartAnim: function() {
          this.message = "アニメーション開始"
        },
        onStopAnim: function() {
          this.message = "アニメーション完了"
        }        
      }
    })
  </script>

  <!--スタイル-->
  <style>
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to {
      opacity: 0;
    }
  </style>  
</body>
</html>

◎ JavaScriptフック
トランジションの前後に処理を行いたい場合は、JavaScriptフックを使います。

<transition name="名前" v-on:イベント名=メソッド名>

トランジションのイベントは、次の8つです。

・before-enter : Enter開始前
・enter : Enter開始時
・after-enter : Enter終了時
・enter-cancelled : Enterキャンセル時

・before-leave : Leave開始前
・leave : Leave開始時
・after-leave : Leave終了時
・leave-cancelled : Leaveキャンセル時

実行結果は、次のとおりです。

画像2


この記事が気に入ったらサポートをしてみませんか？