ホーム > Vue > VueのTransitionを使う方法を簡潔に書いてみる
Vue

VueのTransitionを使う方法を簡潔に書いてみる

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

目次

  1. Vue とは？
  2. 早速実装
  3. 実装の解説
  4. アレンジする
  5. まとめ
オススメ本

⇨ Vue 記事の目次はこちら

Vue の Transition について書いていきます。

表示を切り替える時に、ふわっと表示させたりするときに便利なものとなります。

実は結構簡単に実装できるので、まず一番簡単な方法でやっていきたいと思います。

Vue とは？

Vue は Javascript のフレームワークです。

簡単に SPA を実装することができ、従来の画面全てを遷移させてきた HTML から、変更させるたいところだけを変更させることが簡単になりました。

その反面、画面が変わったとき、あまりにサクッと変わりすぎてどこが変わったか分かりづらいため、Transition でふわっと切り替える必要があります。

早速実装

全文を載せます。

ボタンを押すと、下の文字がふわっと消えたりふわっと出現したりします。

<template>
  <div class="container">
    <button @click="toggleModal">変わるよ</button>
    //v-ifやv-showで表示非表示が切り替わる部分をtransitionタグで囲う
    //fadeという名前のアニメーションを指定しています
    <transition name="fade">
      <div v-if="modal">True</div>
    </transition>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        modal: true,
      };
    },
    methods: {
      toggleModal: function() {
        this.modal = !this.modal;
      },
    },
  };
</script>

<style scoped>
  .container {
    margin: 100px;
    width: 100%;
  }

  /* fadeという名前のアニメーション */
  /* enter-activeなどは、いつアニメーションをするかを指定している */
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.4s;
  }
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }
</style>

実装の解説

コメントアウトのとおりですが、v-if や v-show で表示が切り替わる部分のタグを transition タグで囲います。

<transition name="fade">
  <div v-if="modal">True</div>
</transition>

transition には name を指定します

今回でいえば、name="fade"なので fade という名前がついています。

style にアニメーションする内容を書く

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.4s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

今回は 0.4 秒で徐々に消えていく感じで指定されています。

アレンジする

アニメーションをアレンジしていきます。

アニメーションのアレンジの仕方は、Vue の公式サイトや CSS のアニメーションで検索すると色々見つかると思います。

.fade-leave-active {
  transform: translateX(100px);
  transition: all 0.4s ease;
}

CSS だけ変えてみました。

上のコードに修正すると（さきほどのアニメーションのためのコードは全てコメントアウト）、ボタンを押すと 0.4 秒かけて右に 100px スライドして表示が消えます。

このように、CSS だけ修正していけばアニメーションを微調整させることができます。

ぜひ使ってみてください！

⇨Vue で配列に追加する時に、表示を Transition する方法

まとめ

以上、Vue の Transition をめっちゃ簡単に使う説明でした。

誤字や分かりにくいところありましたら Twitter の DM などからご連絡いただければと思います。

それでは！