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

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>