CODEWITHSUNDEEP
javascriptvue.jsvue-router
Hasan
Hasan

Reputation: 13

How to make Vue Routers Page Transition

I can using vue.js with VueRouter. I need to make page transitions but I am not able to. How can I implement this code.

My code is here https://jsbin.com/hopilecona/edit?html,css,js,output

Please help.

Upvotes: 0

Views: 199

Answers (1)

craig_h
craig_h

Reputation: 32694

Page transitions work the same as normal transitions, I can see that you have wrapped your router view in the transition, you also want to make sure it's in out-in mode, so the first page fades out before the next fades in:

<transition name="fade" mode="out-in">
    <router-view></router-view>
</transition>

Now to set up a fade transition you need the following css:

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}

After that it's just a matter of setting up your view router as normal. Here's the JSFiddle:

https://jsfiddle.net/npe10jot/

Upvotes: 1

Related Questions