Vue.js transition problems

Question

I'm currently creating app that should contain loginView, homeView and a v-app-bar that is outside router so it can be used on every page except loginView.

I wanted do add some nice transitions to it, but I have problem with app bar. Router view has smooth transition, but v-app-bar seems to have some hardcoded transitions inside itself and no prop to give it custom one. How can I force it to use my custom transition?

<template>
 <v-app id="app"> 
  <v-content class="app-main">
    <transition name="fade" mode="out-in">
      <v-app-bar v-if='this.$router.currentRoute.name != "loginView"' color="indigo darken-2" dark>
      </v-app-bar>
     </transition>
     <transition name="fade" mode="out-in">
       <router-view class="view"/>
     </transition>
     <c-alert-bar class="alert"/>
  </v-content>
 </v-app>
</template>

Answer 1

OK, I resolved transition problem, without actually resolving the real problem, but making a workaround:

1. I deleted v-app-bar from App.vue
2. I created additional route between loginView and homeView
3. I made homeView a child of this additional route and put v-app-bar inside (so this intermediate route has v-app-bar and router-view inside)
4. I gave the same transitions to main router-view and this new internal router-view
5. From loginView I move directly to homeView, BUT homeView being child of this intermediate route drags his parent together with himself so I have v-app-bar from his parent and content of homeView below, and everything moves according to given transitions

From user point of view literally nothing changed because I move from "/" to "/home" just like before. Only difference is that all the new pages that fit under v-app-bar will have to be added as children of this intermediate-ghost-page because without it v-app-bar won't be dragged from there. But actually to be honest it's not even a bad thing, because it will force me to group pages under certain parent, so code won't be as messed up later on.