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

今回は、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の実装は以下のとおりです。