HarmonyOS 页面跳转动画

ohos.router是否支持从底部玩上弹出页面的动画，默认的好像都是从右往左弹入。

登录模块的页面希望弹出页面是从底部往上弹出。

HarmonyOS

put_get

2024-10-23 12:29:13

浏览

回答 1

待解决

回答 1

按赞同

按时间

zbw_apple

您可以使用“页面转场动画”，参考链接：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-page-transition-animation-0000001885919517-V5

demo如下：

//page1

import { router } from '@kit.ArkUI';  
@Entry  
@Component  
struct RouterPage1 {  
  @State message: string = 'Hello World';  
  build() {  
    RelativeContainer() {  
      Text(this.message)  
        .id('HelloWorld')  
        .fontSize(50)  
        .fontWeight(FontWeight.Bold)  
        .alignRules({  
          center: { anchor: '__container__', align: VerticalAlign.Center },  
          middle: { anchor: '__container__', align: HorizontalAlign.Center }  
        })  
      Button('点击跳转').onClick(()=>{  
        router.pushUrl({  
          url:'pages/irRouter/RouterPage2'  
        })  
      })  
    }  
    .height('100%')  
    .width('100%')  
    .backgroundColor(Color.Red)  
  }  
  
  pageTransition() {  
    PageTransitionEnter({type:RouteType.None, duration: 500})  
      .slide(SlideEffect.Bottom)  
    PageTransitionExit({type:RouteType.None, duration: 500})  
      .slide(SlideEffect.Top)  
  }  
}

//page2

@Entry  
@Component  
struct RouterPage2 {  
  @State message: string = 'Hello World';  
  build() {  
    RelativeContainer() {  
      Text(this.message)  
        .id('HelloWorld')  
        .fontSize(50)  
        .fontWeight(FontWeight.Bold)  
        .alignRules({  
          center: { anchor: '__container__', align: VerticalAlign.Center },  
          middle: { anchor: '__container__', align: HorizontalAlign.Center }  
        })  
    }  
    .height('100%')  
    .width('100%')  
    .backgroundColor(Color.Green)  
  }  
  pageTransition() {  
    PageTransitionEnter({type:RouteType.None, duration: 500})  
      .slide(SlideEffect.Bottom)  
    PageTransitionExit({type:RouteType.None, duration: 500})  
      .slide(SlideEffect.Top)  
  }  
}