【HarmonyOS】取消页面转场动画

SuperHeroWu72024-05-31 8:26

【HarmonyOS】取消页面转场动画

问题背景：

当A页面切换至B页面时，系统会自带左右进场退场的动画效果。一般来说，该效果是ok的，但是在特殊场景下，例如：

A页面跳到B页面，又跳到C页面。C页面直接返回到A页面。正常不处理时，C到A会有两次页面切换的动画，最终才能展示到A页面。此时就需要能将B页面的转场动画取消。

解决方案：

在页面中，即@Entry修饰的页面类中，需要重写函数pageTransition，实现PageTransitionEnter页面进入，PageTransitionExit页面退出两个实例。

当需要禁止转场动画时，将duration时间设置为0即可。

【目前华为不推荐该pageTransition方式设置转场动画，不过该方法设置起来很简单，若不是较为复杂的业务or动画特殊效果可以如此设置。】

Demo示例：

dart 复制代码

/**
 * 禁用页面转场动画
 */
@Entry
@Component
struct PageTransitionPage {
  
  @State isBackA: boolean = true;

  build() {
    Stack(){
      Text("页面B")
        .size({ width: "100%", height: "100%"})
    }
  }

  pageTransition() {
    if(this.isBackA){
      PageTransitionEnter({ type: RouteType.None, duration: 0 })
      PageTransitionExit({ type: RouteType.None, duration: 0 })
    }
  }
}