perf: 优化路由动画切换 1、切换出现双页面问题 2、切换出现横向和纵向滚动条问题

packages/@core/base/design/src/css/transition.css

@@ -80,7 +80,9 @@
 
 .fade-slide-leave-active,
 .fade-slide-enter-active {
-  transition: all 0.3s;
+  transition:
+    opacity 0.3s,
+    transform 0.3s;
 }
 
 .fade-slide-enter-from {

packages/effects/layouts/src/basic/content/content.vue

@@ -31,7 +31,7 @@ const showComponent = (route: RouteLocationNormalizedLoadedGeneric) => {
 </script>
 
 <template>
-  <div class="relative h-full">
+  <div class="page-route-container relative h-full">
     <IFrameRouterView />
     <RouteCachedView />
     <RouterView v-slot="{ Component, route }">
@@ -44,6 +44,7 @@ const showComponent = (route: RouteLocationNormalizedLoadedGeneric) => {
         v-if="getEnabledTransition"
         :name="getTransitionName(route)"
         appear
+        :leave-active-class="`${getTransitionName(route)}-leave-active page-route-leave-active`"
       >
         <KeepAlive
           v-if="keepAlive"
@@ -85,3 +86,27 @@ const showComponent = (route: RouteLocationNormalizedLoadedGeneric) => {
     </RouterView>
   </div>
 </template>
+
+<style>
+/* 优化router动画切换切换重叠问题 */
+.page-route-leave-active {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+/* 移除动画切换的横向滚动条 translateX(-30px) */
+.page-route-container:has(> .fade-slide-enter-active),
+.page-route-container:has(> .fade-slide-leave-active) {
+  overflow-x: hidden;
+}
+
+/* 移除动画切换的纵向滚动条 */
+.page-route-container:has(> .fade-up-enter-active),
+.page-route-container:has(> .fade-up-leave-active),
+.page-route-container:has(> .fade-down-enter-active),
+.page-route-container:has(> .fade-down-leave-active) {
+  overflow-y: hidden;
+}
+</style>

packages/stores/src/modules/tabbar.ts

@@ -9,7 +9,7 @@ import type {
 
 import type { TabDefinition } from '@vben-core/typings';
 
-import { markRaw, toRaw } from 'vue';
+import { markRaw, nextTick, toRaw } from 'vue';
 
 import { preferences } from '@vben-core/preferences';
 import {
@@ -415,7 +415,8 @@ export const useTabbarStore = defineStore('core-tabbar', {
       this.renderRouteView = false;
       startProgress();
 
-      await new Promise((resolve) => setTimeout(resolve, 200));
+      await nextTick();
+      // await new Promise((resolve) => setTimeout(resolve, 200));
 
       this.excludeCachedTabs.delete(name as string);
       this.renderRouteView = true;