feat(app): add transition for router-view

rudnovd · Jun 11, 2021 · 76d0cc7 · 76d0cc7
1 parent 03076eb
commit 76d0cc7
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -3,7 +3,11 @@
     <img src="~@/assets/icons/arrow_back.svg" width="16" height="16" />
     Home page
   </router-link>
-  <router-view />
+  <transition name="transition-router">
+    <main>
+      <router-view />
+    </main>
+  </transition>
 </template>
 
 <script lang="ts">
@@ -45,4 +49,14 @@ export default defineComponent({
     height: 2rem;
   }
 }
+
+.transition-router-enter-active,
+.transition-router-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.transition-router-enter-from,
+.transition-router-leave-to {
+  opacity: 0;
+}
 </style>
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -9,7 +9,8 @@
 
 html,
 body,
-#app {
+#app,
+main {
   height: 100%;
   line-height: 1.5;
 }