Vue.jsのtransitionコンポーネントの使い方

Vue.js

Vue.jsのtransitionコンポーネントの使い方の基本をまとめました。

Vue.jsのtransitionコンポーネントの使い方

transitionコンポーネント

<transition>
</transition>

上で囲った部分にCSSのtransitionを適用させることができます。
実際に使うときは、name属性を使って名前をつけて適用させます。

<transition name="fade">
</transition>

設定するもの

発動するとき、次の3つを設定します。

  1. .enter-from 変化の始まり
  2. .enter-to 変化の終わり
  3. .enter-active 変化中のふるまいの指定

たとえば、ページやセクションに入ったときに変化させるときに指定します。
ページに入ったとき、次の3つを設定します。

  1. .leave-from 変化の始まり
  2. .leave-to 変化の終わり
  3. .leave-active 変化中のふるまいの指定

具体例

たとえば、次のように指定します。

template

    <transition name="fade">
      <div v-if="showMessage">こんにちは</div>
    </transition>
    <button @click="showMessage = !showMessage">トグル</button>

transitionコンポーネントで囲ってname属性を使って名前を指定します。

script

import { ref } from 'vue'
const showMessage = ref(false)
return { showMessage }

script

.fade-enter-from {
  opacity: 0;
  transform: scale(0.5);
}

.fade-enter-to {
  opacity: 1;
  transform: scale(1.2);
}

.fade-enter-active {
  transition: all 1s ease-in-out;
}
.fade-leave-from {
  opacity: 1;
}

.fade-leave-to {
  opacity: 0;
}

.fade-leave-active {
  transition: opacity 1s ease-in-out;
}

enter-toとleave-fromはデフォルトなのでなくてもOKです。
また、enter-activeとleave-activeは同じ内容になることが多いのでまとめて記述することも多いです。

.fade-enter-active,
.fade-leave-active  {
  transition: all 1s ease-in-out;
}

keyframesを設定

より複雑なアニメーションを加えたい場合は、keyframesを設定します。

.fade-enter-active {
  transition: all 0.3s ease;
}

.fade-leave-active {
  animation: wobble 0.3s ease;
}

@keyframes wobble {
  0% { transform: translateY(0); opacity: 1 }
  50% { transform: translateY(0); }
  60% { transform: translate(8px, -5px) }
  70% { transform: translate(-8px, -10px); opacity: 0.5 }
  80% { transform: translate(4px, -20px) }
  90% { transform: translate(-4px, -30px); }
  100% { transform: translate(0, -60px);  opacity: 0}
}

普通のCSSと同じで、まずはkeyframesに名前をつけて、
内容を設定し、それを適用したいところでanimationプロパティでつけた名前を指定すると適用できます。

VueCompilerError: expects exactly one child element or component.

transitionコンポーネントは一つの子要素か一つのコンポーネントの場合のみ利用できます。
そのためたとえばv-forなどでループしているところに使用しようとすると、

VueCompilerError:  expects exactly one child element or component.

というエラー警告が表示されてしまいます。

そのためv-forなどの部分にアニメーションを適用したい場合は、transition-groupを使います。

transition-groupの使い方を参考にしてみてください。

Vue.js

Posted by devsakaso