magiun_website/src/App.vue

<template>
   <b-container fluid>
     <transition
        :name="transitionName"
        mode="out-in"
        >
     <router-view></router-view>
      </transition>
   </b-container>
</template>

<script>
const DEFAULT_TRANSITION = 'fade';

export default {
  name: 'app',
  data() {
    return {
      transitionName: DEFAULT_TRANSITION,
    };
  }
}
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition-duration: 0.3s;
  transition-property: opacity;
  transition-timing-function: ease;
}

.fade-enter,
.fade-leave-active {
  opacity: 0
}

.slide-leave-active,
.slide-enter-active {
  transition: 0.5s;
}
.slide-enter {
  transform: translate(100%, 0);
}
.slide-leave-to {
  transform: translate(-100%, 0);
}

.slideback-leave-active,
.slideback-enter-active {
  transition: 0.5s;
}
.slideback-enter {
  transform: translate(-100%, 0);
}
.slideback-leave-to {
  transform: translate(100%, 0);
}
</style>