feat: 页面切换动画

src/layouts/BasicLayout.tsx

@@ -1,6 +1,5 @@
-import { computed, defineComponent, h, ref } from 'vue';
+import { computed, defineComponent, h, ref, Transition, KeepAlive } from 'vue';
 import type { CSSProperties } from 'vue';
-import { KeepAlive } from 'vue';
 import { useRouter, useRoute, RouterView } from 'vue-router';
 import { Layout, Menu, Modal, Breadcrumb, Dropdown, message } from 'ant-design-vue';
 import type { MenuProps } from 'ant-design-vue';
@@ -263,15 +262,19 @@ export default defineComponent({
             include 是组件 name 列表,所以页面组件需要在 defineComponent 中显式给出 name
           */}
           <Content class={styles.content}>
-            <RouterView
-              v-slots={{
-                default: ({ Component }: any) => (
-                  <KeepAlive include={cachedViews.value}>
-                    <Component />
-                  </KeepAlive>
-                ),
-              }}
-            />
+            <div class={styles.pageView}>
+              <RouterView
+                v-slots={{
+                  default: ({ Component, route }: any) => (
+                    <KeepAlive include={cachedViews.value}>
+                      <Transition name="page-fade-slide" mode="out-in">
+                        {Component ? h(Component, { key: route.path }) : null}
+                      </Transition>
+                    </KeepAlive>
+                  ),
+                }}
+              />
+            </div>
           </Content>
 
           <Footer style={footerStyle}>六个羽友赛事运营平台 ©{new Date().getFullYear()}</Footer>