Vue enter transition on router

Question

I'm following this image from vue docs

my html

<transition name="fade">
  <router-view/>
</transition>

and css

.fade-enter-active, .fade-leave-active {
  transition: opacity 2s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.fade-enter-to, .fade-leave {
  opacity: 1;
}

it fade out correctly but instantly pop in instead of fade-in. Why?

I've created demo repository with just 2 components, steps to reproduce:

git clone https://github.com/BorysTyminski/vue-transition-issue.git
cd vue-transition-issue
npm install
npm run dev

And demo codesanbox: https://codesandbox.io/embed/vue-template-4e4oy

It should work. Are you sure the element doesn't have a stronger selector applying transition-duration? Can you provide a minimal reproducible example? — tao
Sure I created demo repo with just 2 routes and nothing more. — BT101
Did you check it? Is it not working on your machine as well? — BT101
I can't install random projects on machines at work, I'll check it from home, when I have time. You could have used codesandbox.io, btw. — tao
Sure, here you go codesandbox.io/embed/vue-template-4e4oy Just click huge link "Go to second" — BT101

tao tao · Accepted Answer · 2019-06-05T19:37:16

The problem is both your divs transition at the same time.
Which means they're both present in DOM at the same time.
Which means the second one, like any good ol' <div>, will be rendered below the first one.
Below as in "...further down the page".
Unless it's absolutely positioned with top:0, of course.

So I guess you're missing...

#app {
  position: relative;
  > div + div {
    position: absolute;
    top: 0;
  }
}

See it.

Vue enter transition on router

1 Answers