[Vuejs]-Nuxt 3 (Vue.js 3) component transitions not working

by

2👍

✅

Firstly, remove the :key from the Transition. I think this is what’s stopping the rendering entirely.

Then, you’ll want to add your leave-to and leave-from css properties.

This should do the trick:

<template>
  <div>
    <!--- other HTML -->
    <transition name="left-to-right" mode="out-in">
      <QuestionsWrap :question="questionScreens[currentScreenIndex]" :key="currentScreenIndex" />
    </transition>
    <!--- other HTML -->
  </div>
</template>

<style scoped>
  .left-to-right-leave-active {
    transition: all 0.5s ease-out;
  }
  .left-to-right-leave-to {
    transform: translateX(100%);
  }

  .left-to-right-enter-active {
    transition: all 0.5s ease-out;
  }
  .left-to-right-enter-from {
    transform: translateX(-100%);
  }
</style>
👤benwastaken

1👍

Remove scoped attribute from style:

<style>
  .left-to-right-enter-active {
    transition: all 0.5s ease-out;
    transform: translateX(-100%);
  }
  .left-to-right-leave-active {
    transition: all 0.5s ease-out;
    transform: translateX(100%);
  }
</style>

Remember Nuxt match css clases and scoped add extra id on compile.

👤Hans Felix Ramos

Leave a comment