Vue Router Fade Transition

RouterFade.vue

<template>
  <div id="app">
    <div id="nav">
      <!-- <pre><code class="javascript">console.log('hi")</code></pre> -->
      <div class="flex-container">
        <div class="flex-item">
          <router-link to="/">Home</router-link>
        </div>
        <div class="flex-item">
          <router-link to="/colors">Colors</router-link>
        </div>
        <div class="flex-item">
          <router-link to="/fonts">Fonts</router-link>
        </div>
        <div class="flex-item">
          <router-link to="/typography">Typography</router-link>
        </div>
      </div>
    </div>
    <transition name="fade">
      <router-view />
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {
    // HelloWorld: () => import("./components/HelloWorld.vue"),
  },
  data() {
    return {};
  }
};
</script>

<style lang="scss" scoped>
@import "./styles/colors.scss";
@import "./styles/font.scss";
@import "./styles/typography-screen";

#app {
  margin-top: 60px;
  margin-bottom: 30px;
  padding-bottom: 30px;
}

#nav a {
  @extend .font-bold;
  color: $navy-blue;
}
#nav a.router-link-exact-active {
  color: $blue;
}

.flex-container {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 160px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
  padding-left: 20px;

}
.flex-item {
  padding-right: 10px;
}

.fade-enter-active,
.fade-leave-active {
  transition-property: opacity;
  transition-duration: 0.25s;
}

.fade-enter-active {
  transition-delay: 0.25s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}
</style>