页面退出时，旧页面的内容与新页面的内容重叠
=====================

#### 问题现象

页面退出时，新页面与正在退出的页面显示重叠。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/84/v3/uJd54rYNSh6prAe94EzHWQ/zh-cn_image_0000002628391616.png?HW-CC-KV=V1&HW-CC-Date=20260709T134016Z&HW-CC-Expire=86400&HW-CC-Sign=E46233DBAE4A97BAE0EB241C86079E389757698377B0AB0153CFC4DF78E1C9D6 "点击放大")

#### 背景知识

使用[pageTransition](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-custom-component-lifecycle#pagetransition9)实现页面转场动画时，可通过设置[PageTransitionEnter](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-page-transition-animation#pagetransitionenter)和[PageTransitionExit](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-page-transition-animation#pagetransitionexit)的[slide](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-page-transition-animation#slide)属性定义从其他页面进入/退出该页面时的效果。

#### 问题定位

查看该问题页面的相关设置，该页面使用PageTransitionEnter设置了转场动画，返回后的页面未使用转场动画。

_// PageOne.ets_
@Entry
@Component
export struct PageOne {
  build() {
    Stack() {
      Button('返回')
        .fontSize(20)
        .fontColor(Color.White)
        .type(ButtonType.Capsule)
        .width(200)
        .height(50)
        .margin({ top: 20 })
        .backgroundColor('#0A59F7')
        .onClick(() => {
          this.getUIContext().getRouter().back();
        })
    }
    .height('100%')
    .width('100%')
  }

  pageTransition() {
    _// 定义页面进入时的效果，从右侧滑入，时长为1000ms，页面栈发生push操作时该效果才生效_
    PageTransitionEnter({ duration: 1000 })
      .slide(SlideEffect.Right)
  _  // 定义页面退出时的效果，向右侧滑出，时长为1000ms，页面栈发生pop操作时该效果才生效_
    PageTransitionExit({ type: RouteType.Pop, duration: 1000 })
      .slide(SlideEffect.Right)
  }
}

@Entry
@Component
struct Index {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button('点击跳转')
        .fontSize(20)
        .fontColor(Color.White)
        .type(ButtonType.Capsule)
        .width(200)
        .height(50)
        .margin({ top: 20 })
        .backgroundColor('#0A59F7')
        .onClick(() => {
          this.getUIContext().getRouter().pushUrl({
            url: 'pages/PageOne'
          });
        });
    }
    .width('100%')
    .height('100%')
    .expandSafeArea(\[SafeAreaType.SYSTEM\], \[SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM\]);
  }
  _// 该页面未使用转场动画_
}

#### 分析结论

该页面使用PageTransitionEnter设置了转场动画，而返回后的页面未使用转场动画，页面跳转时目的页面立即显示，原页面仍在执行转场动画，导致页面内容重叠显示。

#### 修改建议

返回后的页面也使用转场动画。

@Entry
@Component
struct Index {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button('点击跳转')
        .fontSize(20)
        .fontColor(Color.White)
        .type(ButtonType.Capsule)
        .width(200)
        .height(50)
        .margin({ top: 20 })
        .backgroundColor('#0A59F7')
        .onClick(() => {
          this.getUIContext().getRouter().pushUrl({
            url: 'pages/PageOne'
          });
        });
    }
    .width('100%')
    .height('100%')
    .expandSafeArea(\[SafeAreaType.SYSTEM\], \[SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM\]);
  }

 _ // 该页面也使用转场动画_
  pageTransition() {
    _// 定义页面进入时的效果，从左侧滑入，时长为1000ms，页面栈发生push操作时该效果才生效_
    PageTransitionEnter({ type: RouteType.Pop, duration: 1000 })
      .slide(SlideEffect.Left);
  _  // 定义页面退出时的效果，向左侧滑出，时长为1000ms，页面栈发生pop操作时该效果才生效_
    PageTransitionExit({ type: RouteType.Pop, duration: 1000 })
      .slide(SlideEffect.Left);
  }
}

PageOne.ets：

@Builder
export function PageOneBuilder() {
  PageOne();
}

@Entry
@Component
export struct PageOne {
  build() {
    Stack() {
      Button('返回')
        .fontSize(20)
        .fontColor(Color.White)
        .type(ButtonType.Capsule)
        .width(200)
        .height(50)
        .margin({ top: 20 })
        .backgroundColor('#0A59F7')
        .onClick(() => {
          this.getUIContext().getRouter().back();
        });
    }
    .height('100%')
    .width('100%')
    .expandSafeArea(\[SafeAreaType.SYSTEM\], \[SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM\]);
  }

  pageTransition() {
    _// 定义页面进入时的效果，从右侧滑入，时长为1000ms，页面栈发生push操作时该效果才生效_
    PageTransitionEnter({ duration: 1000 })
      .slide(SlideEffect.Right);
    _// 定义页面退出时的效果，向右侧滑出，时长为1000ms，页面栈发生pop操作时该效果才生效_
    PageTransitionExit({ type: RouteType.Pop, duration: 1000 })
      .slide(SlideEffect.Right);
  }

}

src/main/resources/base/profile/router\_map.json：

{
  "routerMap": \[
    {
      "name": "pageOne",
      "pageSourceFile": "src/main/ets/pages/PageOne.ets",
      "buildFunction": "PageOneBuilder"
    }
  \]
}

src/main/module.json5文件中需添加"routerMap": "$profile:router\_map"。

效果图如下：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/77/v3/DdL4pt9eQvyhh5NuB4zbzw/zh-cn_image_0000002658910833.png?HW-CC-KV=V1&HW-CC-Date=20260709T134016Z&HW-CC-Expire=86400&HW-CC-Sign=9FD1D4AE263F86AAB1C91B13EC87C365EB22DD57A7E86779B8784DF971102AB8 "点击放大")