修改动画

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/>

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' }
         },
     ]
 }

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,