Transitions between VueJs routers

Question

I try to create some transitions on my router view components every time I click on a new link. The problem is that only one of the fade animations will work. For example, it will disappear, but a new page will appear immediately, as usual. Basically, I can only have a class with an active active class or an active class, but not both at the same time.

<template> <div class="tom-layout"> <navBar class="z-depth-0"></navBar> <div class="content-layout"> <transition name="fade"> <router-view></router-view> </transition> </div> </div> </template> <script> import NavBar from './components/NavBar.vue'; export default { components: { navBar: NavBar } } </script> <style lang="scss"> @import url('https://fonts.googleapis.com/css?family=Ek+Mukta'); body { overflow: hidden; .content-layout { margin-top: -64px; width: 100%; z-index: -5; } } .fade-enter { opacity: 0; } .fade-enter-active { transition: opacity 2s ease; } .fade-leave { } .fade-leave-active { transition: opacity 2s ease; opacity: 0; } 

Answer 1

I just use mode : out-in it works fine:

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

Please check if fiddle is working.