Vueは友達
ホーム
>
Vue
>
vue.jsの<Transition>について簡単なサンプルコードで解説

vue.jsの<Transition>について簡単なサンプルコードで解説

vue.jsのについて簡単なサンプルコードで解説

12 回閲覧されました

みなさんこんにちは、jonioです。

今回はVue.jsの<Transition>について簡単なサンプルコードで解説します。

Laravelの無料学習サイトを作りました

Laravelをこれから勉強したい人向けの無料の学習サイトを作りました。

ここからリンクに飛べますのでぜひ利用してください。

<Transition>とは

要素がDOMに追加・削除される瞬間にクラスを自動で付けてくれるアニメーションの仕組みです。

コードで見た方がイメージが沸くのでコードを使って解説します。

サンプルコード

下記のコードで考えます。

<template>
  <button 
    @click="show = !show"
  >切り替え</button>
  <Transition>
    <p v-if="show">こんにちは</p>
  </Transition>
</template>

<script setup>
import { ref } from 'vue';
const show = ref(false);
</script>

<style>
.v-enter-from { opacity: 0; }
.v-enter-active { transition: opacity 0.5s; }
.v-leave-to { opacity: 0; }
.v-leave-active { transition: opacity 0.5s; }
</style>

自動的にクラスが付与されるのは「<Transition>」に包まれている要素(6行目)です。

初期表示で6行目は非表示になっていますが「切り替え」をクリックした時に6行目が表示されます。

表示される時に下記のcssのクラス名が上から順に付与されます。

v-enter-from
v-enter-active
v-enter-to

再び「切り替え」をクリックすると6行目が非表示になります。

非表示になる時に下記のcssのクラス名が上から順に付与されます。

v-leave-from
v-leave-active
v-leave-to

「<Transition>」に包まれている要素にcssを付与することでcssの制御ができるようになるということです。

クラス名が適用されるタイミングをずらす方法

下記のコードが表示・非表示時に下記のcssが適用されます。

<p v-if="show">こんにちは</p>

// 表示時に適用されるcss
v-enter-from
v-enter-active
v-enter-to

// 非表示時に適用されるcss
v-leave-from
v-leave-active
v-leave-to

cssが適用されるタイミングですが表示の時のcssと非表示の時のcssは同時に適用されます。

同時に適用されることにより場合によっては表示が変になる時があります。

表示時に適用されるcssと非表示時に適用されるcssのタイミングをずらすことができます。

表示と非表示のどちらを先にするかで記述が少し変わります。

下記は非表示を先にする場合です。

<Transition
  mode="out-in"  // この行を追記
>
  <p v-if="show">こんにちは</p>
</Transition>

cssの適用の順は下記になります。

v-leave-from
v-leave-active
v-leave-to

      ↓

v-enter-from
v-enter-active
v-enter-to

下記は表示を先にする場合です。

<Transition
  mode="in-out"  // この行を追記
>
  <p v-if="show">こんにちは</p>
</Transition>

cssの適用の順は下記になります。

v-enter-from
v-enter-active
v-enter-to

      ↓

v-leave-from
v-leave-active
v-leave-to

css名の接頭辞カスタム

css名の接頭辞「v」はカスタムすることができます。

下記の記述をすればいいです。

<template>
  <button 
    @click="show = !show"
  >切り替え</button>
  <Transition name="fade">  // この行を修正
    <p v-if="show">こんにちは</p>
  </Transition>
</template>

「name=”値”」の記述をすればいいです。

値を「fade」にした場合は「v」が「fade」に変わってcss名が下記になります。

fade-enter-from
fade-enter-active
fade-enter-to
fade-leave-from
fade-leave-active
fade-leave-to

cssの名称を全て変更する

接頭辞を変更するのではなくcss名自体を変更することも可能です例えば下記の記述をします。(enterFrom・enterActive等の記述の中身は無視して下さい)

<template>
  <button 
    @click="show = !show"
  >切り替え</button>
  <Transition
  
  
    // ここから追加
    :enter-from-class="enterFrom"
    :enter-active-class="enterActive"
    :enter-to-class="enterTo"
    :leave-from-class="leaveFrom"
    :leave-active-class="leaveActive"
    :leave-to-class="leaveTo"
    // ここまで追加
    
    
  >
    <p v-if="show">こんにちは</p>
  </Transition>
</template>

<script setup>
const enterFrom = computed(() => {
  if (suppressTransition.value) return 'translate-y-0 opacity-100'
  return t.value === 'slide-up'   ? 'translate-y-full opacity-0' :
         t.value === 'slide-down' ? '-translate-y-full opacity-0' : 'opacity-0'
});

const enterActive = computed(() => 
  suppressTransition.value 
    ? 'transition-transform transition-opacity duration-0' 
    : 'transition-transform transition-opacity duration-300 ease-out'
);

const enterTo = 'translate-y-0 opacity-100'
const leaveFrom = 'translate-y-0 opacity-100'

const leaveActive = computed(() =>
  suppressTransition.value
    ? 'transition-transform transition-opacity duration-0'
    : 'transition-transform transition-opacity duration-200 ease-in'
);

const leaveTo = computed(() =>
  t.value === 'slide-up'   ? '-translate-y-6 opacity-0' :
  t.value === 'slide-down' ? 'translate-y-6 opacity-0'  : 'opacity-0'
);
</script>

「:enter-from-class」の「enter-from-class」の名称は固定です。

cssの名称があった時との対応は以下になります。

v-enter-from    → :enter-from
v-enter-active  → :enter-active
v-enter-to      → :enter-enter
v-leave-from    → :leave-from
v-leave-active  → :leave-active
v-leave-to      → :leave-to