Vue 3 – fade transition broken

user_14067182 0
Viewed 3363

I read about the transition changes from Vue 2 however and read the Vue 3 docs but I still can't figure out how to make the transition work. I'm very new to Vue.

The old page should fade out and the new page should fade in, I can't get it to work though.

I don't really know what to write inside the <transition> wrapper other than the default component. I tried changing component to the views' names but that doesn't work.

My App.vue

<router-view :key="route.path" v-slot="{Component}" />
  <transition name="fade" mode="out-in">
    <component :is="Component" />
  </transition>
</router-view>

My CSS:

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s ease;
}

.fade-enter-from,
.fade-leave-active {
  opacity: 0;
}

My folder structure:

Components: – Header.vue
  |         - Footer.vue
  |
Views:      - Home.vue
            - About.vue
            - Something.vue

Thanks for any tips on how to make the fade work!

vuejs3 fade javascript
1 Answers

Try using .fade-leave-to instead:

Vue.createApp({
  setup() {
    const test = Vue.ref(false);
    
    return { test }
  }
}).mount('#app')
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  <transition name="fade" mode="out-in">
    <div v-if="test">FADE</div>
  </transition>
  <button @click="test = !test">TOGGLE</button>
</div>

Example using your snippet:

<router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
        <component :is="Component" />
    </transition>
</router-view>

.fade-enter-active,
.fade-leave-active {
    transition: opacity 1s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
user_127019490
Related