routing transitions

src/layouts/DashboardLayout.vue

@@ -57,7 +57,9 @@
 
       <b-col col lg="9" xl="10">
         <!-- Content -->
-        <router-view></router-view>
+        <transition name="change-page" mode="out-in">
+          <router-view></router-view>
+        </transition>
 
         <!-- Footer -->
         <footer class="d-flex justify-content-end text-muted pr-3">
@@ -239,4 +241,27 @@ export default {
 .mobile-vertical-menu-fader-leave-to {
   opacity: 0;
 }
+
+// Page changing transitions
+
+.change-page-enter-active,
+.change-page-leave-active {
+  transition: transform 0.4s, opacity 0.4s ease;
+}
+.change-page-enter {
+  transform: translate3d(-40px, 0, 0);
+  opacity: 0;
+}
+.change-page-enter-to {
+  transform: translate3d(0, 0, 0);
+  opacity: 1;
+}
+.change-page-leave {
+  transform: translate3d(0, 0, 0);
+  opacity: 1;
+}
+.change-page-leave-to {
+  transform: translate3d(40px, 0, 0);
+  opacity: 0;
+}
 </style>