目录

How do I implement the slide up and slide down effect for page transition?

You can use the pageTransition API to implement the page transition effect. Specifically, set the slide attribute in PageTransitionEnter and PageTransitionExit to SlideEffect.Bottom. In this way, the page slides in and out from the bottom. The code snippet is as follows:

// Index.ets
@Entry
@Component
struct PageTransition1 {
  pageInfos: NavPathStack = new NavPathStack();

  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      Navigation(this.pageInfos) {
        Image($r('app.media.ic_banner01')).width('100%').height(200) // The image is stored in the media folder
      }
    }.height('100%').width('100%')
  }

  pageTransition() {
    PageTransitionEnter({ duration: 500, curve: Curve.Linear }).slide(SlideEffect.Bottom)
    PageTransitionExit({ duration: 500, curve: Curve.Ease }).slide(SlideEffect.Bottom)
  }
}
// Page1.ets
@Entry
@Component
struct PageTransition2 {
  pageInfos: NavPathStack = new NavPathStack();

  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      Navigation(this.pageInfos) {
        Image($r('app.media.ic_banner02')).width('100%').height(200) // The image is stored in the media folder
      }
    }.height('100%').width('100%')
  }

  pageTransition() {
    PageTransitionEnter({ duration: 500, curve: Curve.Linear }).slide(SlideEffect.Bottom)
    PageTransitionExit({ duration: 500, curve: Curve.Ease }).slide(SlideEffect.Bottom)
  }
}

Reference

Page Transition (pageTransition)