Eerie limbo with transitions between router-views

Trying to get transitions working between router-views and encountering a strange situation where when I start on some component, say A, and go to component B, I end up in a weird in-between state for like fifteen seconds before the transition finishes and B shows up. But if I refresh the page on B it shows up instantly. During the limbo I can inspect the Transition component in the Vue dev tools and the only two props it looks like it has at that point are mode and name, which are passed as attributes in the template. So it seems like there might be some delay in the Transition receiving props? I’m not even sure if that’s how this works.

Anyway, here’s the relevant code. This is all in a single file component App.vue, let me know if you need to see the router code or anything.

<template>
  <div id="app">
    <Navbar/>
    <transition name="main-slide" mode="out-in">
      <router-view/>
    </transition>
    <div id="main-flex-spacer"/>
    <Footer/>
  </div>
</template>
.main-slide-enter-active {
  transition: all 5s ease-in;
}

.main-slide-leave-active {
  transition: all 5s;
}

.main-slide-enter, .main-slide-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

And the dev tools:

OK so by setting an explicit duration as a prop to the transition I seem to have solved it:

<transition name="main-slide" mode="out-in" duration="400">
      <router-view/>
</transition>

I still don’t understand, isn’t Vue supposed to figure out when the transition ends automatically? The docs say it’s listening for a transitionend event, why would that not be emitted here, I guess.