Last-Modified: 2022/05/28

Vue.jsのトランジション【現役エンジニアが解説】

PROGRAM

今回は、Vue.jsのトランジションについて、簡単に解説していきます。

HTML

Vue.jsではアニメーション等のエフェクトを付ける仕組みがあります。

具体的には、transtionタグで囲うことで、エフェクトを付けられます。

<div id="app">
  <button type="button" @click="changeIsShow">表示切替</button>
  <transition name="hoge">
    <p v-if="isShow">ほげ</p>
  </transition>
</div>

上記のコードでは、p要素に対して、アニメーション等のエフェクトを付けられるようにしています。

CSS

CSSは以下のように設定します。

.hoge-enter-active {
  animation: bounce-in 0.5s;
}
.hoge-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

クラス名のhogeがtransition要素のname属性の値です。

クラス名のenterが表示、leaveが非表示への移行フェーズと理解してください。

Vue.js

Vue.jsの実装は以下のとおりです。

new Vue({
  el: '#app',
  data: {
    isShow: false,
  },
  methods: {
    changeIsShow: function() {
      this.isShow = !this.isShow;
    }
  }
})

今回動作確認のため、表示切替用のメソッドを用意しています。

表示切替ボタンクリック時にisShowプロパティの値を切り替えて、その都度エフェクトが確認できます。

• facebook
• Tweet
• Read Later