From b893691579b16363152ef4b588524c8e498df69e Mon Sep 17 00:00:00 2001
From: zouzhibing <zouzhibing@anthead.cn>
Date: Mon, 23 May 2022 20:35:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/AppMain.vue  |  6 +++---
 src/router/modules/externalLink.ts |  2 +-
 src/styles/transition.scss         | 16 ++++++++++++++++
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index e48062a..eeb5a4b 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -1,8 +1,8 @@
 <template>
   <section class="app-main" >
-      <router-view v-slot="{ Component }">
-        <transition name="fade-transform" mode="out-in">
-          <component :is="Component" />
+      <router-view v-slot="{ Component,route }">
+        <transition name="fade-slide" mode="out-in">
+          <component :is="Component" :key="route.path"/>
         </transition>
       </router-view>
       <u-setting/>
diff --git a/src/router/modules/externalLink.ts b/src/router/modules/externalLink.ts
index 41cd066..a97fb4e 100644
--- a/src/router/modules/externalLink.ts
+++ b/src/router/modules/externalLink.ts
@@ -11,7 +11,7 @@ const externalLink = {
         {
             path: 'https://github.com/zouzhibin/vue-admin-perfect',
             name: 'external',
-            meta: { title: '外链', noCache: true , icon: 'link' }
+            meta: { title: 'github 地址', noCache: true , icon: 'link' }
         },
     ]
 }
diff --git a/src/styles/transition.scss b/src/styles/transition.scss
index c3fbb7c..770aed4 100644
--- a/src/styles/transition.scss
+++ b/src/styles/transition.scss
@@ -10,6 +10,22 @@
 .fade-leave-active {
   opacity: 0;
 }
+
+/* router view transition fade-slide */
+.fade-slide-leave-active,
+.fade-slide-enter-active {
+  transition: all 0.3s;
+}
+
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
 //
 ///* fade-transform */
 //.fade-transform-leave-active,