Fixed elements jump on screen when using transitions in vuejs

When using transitions between routes in vue it seems fixed or absolute elements only move to their positions after the transition has completed leading to a jump after animation. Is this perhaps a bug?

Heres a codepen example: https://codepen.io/anon/pen/ebyOYx

HTML:

<div id="app"></div>

<template id="root-template">
  <div class="routes">
      <nav>
        <router-link to="/" exact>Home</router-link>
        <router-link to="/contact">Contact</router-link>
      </nav>
      <transition name="slide-left" mode="out-in">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </transition>
    </div>
</template>

<template id="home-template">
  <div class="page">
      <h1>Home Page</h1>
      Go to the Contact page and notice the fixed toolbar jumping after transition
  </div>
</template>

<template id="contact-template">
  <div class="page">
      <h1>Contact Page</h1>
    <div class="toolbar">
      Toolbar
    </div>
  </div>
</template>

<template id="404-template">
  <div class="page">
      <h1>404 Not Found</h1>
  </div>
</template>

JAVASCRIPT:

const HomePage = {
  name: 'HomePage',
  template: '#home-template'
}

const ContactPage = {
  name: 'ContactPage',
  template: '#contact-template'
}

const NotFoundPage = {
  name: 'NotFoundPage',
  template: '#404-template'
}

const routes = [
  { path: '/', component: HomePage },
  { path: '/contact', component: ContactPage },
  { path: '*', component: NotFoundPage },
]

const router = new VueRouter({
  base: '/rugor/debug/VKgoRK/', // codepen specific base
  routes
})

new Vue({
  router,
  template: '#root-template'
}).$mount('#app')