diff --git a/src/App.vue b/src/App.vue
index 0cfbab58f..1bb668c9a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,9 @@
 <template>
-  <router-view></router-view>
+  <router-view v-slot="{ Component }">
+    <transition name="fade">
+      <component :is="Component" />
+    </transition>
+  </router-view>
 </template>
 
 <script>
diff --git a/src/style.css b/src/style.css
index 9051102b0..f4bc21176 100644
--- a/src/style.css
+++ b/src/style.css
@@ -28,4 +28,15 @@ a:hover, a:focus {
 
 #app {
   height: 100%;
-}
\ No newline at end of file
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}