Added animation to page change

src/App.vue

@@ -6,7 +6,26 @@ import NavBar from './components/NavBar.vue'
 <template>
   <NavBar />
 
-  <RouterView />
+  <RouterView v-slot="{ Component, route }">
+    <transition name="page" mode="out-in">
+      <component :is="Component" :key="route.path" />
+    </transition>
+  </RouterView>
 </template>
 
-<style scoped></style>
+<style scoped>
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.2s ease;
+}
+
+.page-enter-from {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.page-leave-to {
+  opacity: 0;
+  transform: translateX(-20px);
+}
+</style>