Vue.jsのtransitionコンポーネントnameを動的にして使う方法

2021年6月5日Vue.js

Vue.jsのtransitionコンポーネントnameを動的にして使う方法を紹介します。
特に次へ、前へ、上へ、下へなどの似たようなアニメーションを設定する際に使います。

カルーセルスライダーを例とします。
Vue.jsでのカルーセルスライダーの作り方も参考にしてみてください。

Vue.jsのtransitionコンポーネントnameを動的にして使う方法

親をApp.vue、子をCarouselSlide.vueとします。
子コンポーネントCarouselSlide.vueは次のように設定します。

CarouselSlide.vue

  <transition :name="direction" mode="in-out">
    ...
  </transition>

nameをv-bindで動的にして、方向を示すdirectionとします。

export default {
  props: [
    'direction',
  ]
}

cssを設定します。

.carousel{
  &__left {
    // 左から入ってくる
    &-enter-active {
      animation: leftIn 0.3s ease-in-out;
    }
    // 左へ出ていく
    &-leave-active {
      animation: leftOut 0.3s ease-in-out;
    }
  }
  &__right {
    // 右から入ってくる
    &-enter-active {
      animation: rightIn 0.3s ease-in-out;
    }
    // 右へ出ていく
    &-leave-active {
      animation: rightOut 0.3s ease-in-out;
    }
  }
}
@keyframes leftIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0%); }
}
@keyframes leftOut {
  from { transform: translateX(0%); }
  to { transform: translateX(-100%); }
}
@keyframes rightIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0%); }
}
@keyframes rightOut {
  from { transform: translateX(0%); }
  to { transform: translateX(100%); }
}

App.vue

    <CarouselSlide
      v-for="(slide, index) in slides"
      :key="slide"
      :direction="direction"
      >
    </CarouselSlide>

子にわたすdirectionを設定します。

そして、変数を用意して、メソッドで値を入れ替えます。

    const direction = ref('left')

    // Carouselから受け取ったnext
    const next = () => {
      if(条件) {
        visibleSlide.value = 0
      } else {
        visibleSlide.value++
      }
      direction.value = 'carousel__left'
    }
    // Carouselから受け取ったprev
    const prev = () => {
      if(条件) {
        visibleSlide.value = slidesLength.value - 1
      } else {
        visibleSlide.value--
      }
      direction.value = 'carousel__right'
    }

これで、それぞれのメソッドでイベントが発火するごとに、子のtransitionコンポーネントのname属性の値が切り替わり、
アニメーションが切り替わるようになります。