CODEWITHSUNDEEP
cssvue.jsvuejs3vue-routervue-transitions
villagercomrade
villagercomrade

Reputation: 35

Vue.js component not transitioning out even with mode="out-in"

I'm relatively new to vue.js and have been trying to get my routed pages to fade in and out when the user switches to a new page. I thought it would be fairly simple with vue, but I have been tearing my hair out over this. All the resources I found suggested it would be easiest to implement this in the following way, like I have:

App.vue:

...
<template>
  <head>
    ...
  </head>
  
    <header>
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/committees">Committees</RouterLink>
      </nav>
    </header>
    
  <Transition name="fade" mode="out-in"><RouterView/></Transition>
      
</template>


<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s ease-in-out;
}

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

...

</style>

This works for fading into the new component, but the old component doesn't fade out. The page just goes blank immediately, then the new component fades in. I have tried every variation of the css and html, and nothing has worked. Does RouterView never actually fade out because the components just switch, so .fade-leave-to is never triggered? If this is the case, how could I achieve my end goal of fading out? If not, uh... pretty please help!

Upvotes: 1

Views: 386

Answers (1)

Moritz Ringler
Moritz Ringler

Reputation: 16061

The manual is your friend:

In order to use transitions on your route components and animate navigations, you need to use the v-slot API:

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

Upvotes: 0

Related Questions