Page Transition

You can customize the page entrance and exit animations in the pageTransition API for transition between pages. For details, see Page Transition Animation.

NOTE

This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.

To achieve a better transition effect, you are advised to use the <Navigation> component and modal transition.

Name	Parameter	Mandatory	Description
PageTransitionEnter	{ type?: RouteType, duration?: number, curve?: Curve \|string \|ICurve¹⁰⁺, delay?: number }	No	Page entrance animation. - type: route type for the page transition effect to take effect. Default value: RouteType.None - duration: animation duration. Unit: ms Default value: 1000 - curve: animation curve. The value of the string type can be any of the following: "ease", "ease-in", "ease-out", "ease-in-out", "extreme-deceleration", "fast-out-linear-in", "fast-out-slow-in", "friction", "linear", "linear-out-slow-in", "rhythm", "sharp", "smooth". Default value: Curve.Linear - delay: animation delay. Unit: ms Default value: 0 NOTE If no match is found, the default page transition effect is used (which may vary according to the device). To disable the default page transition effect, set duration to 0.
PageTransitionExit	{ type?: RouteType, duration?: number, curve?: Curve \|string \|ICurve¹⁰⁺, delay?: number }	No	Page exit animation. - type: route type for the page transition effect to take effect. Default value: RouteType.None - duration: animation duration. Unit: ms Default value: 1000 - curve: animation curve. The value range of the string type is the same as that of PageTransitionEnter. Default value: Curve.Linear - delay: animation delay. Unit: ms Default value: 0 NOTE If no match is found, the default page transition effect is used (which may vary according to the device). To disable the default page transition effect, set duration to 0.

RouteType

Name	Description
Pop	Redirects to a specified page. To redirect the user from page B back to page A, set RouteType of PageTransitionExit to None or Pop for page B and set RouteType of PageTransitionEnter to None or Pop for page A.
Push	Redirects to the next page. To redirect the user from page A to page B, set RouteType of PageTransitionExit to None or Push for page A and set RouteType of PageTransitionEnter to None or Push for page B.
None	The page is not redirected. The animation specified by PageTransitionEnter takes effect for page entrance, and the animation specified by PageTransitionExit takes effect for page exit.

Attributes

Name	Type	Mandatory	Description
slide	SlideEffect	No	Slide effect during page transition.
translate	{ x? : number \|string, y? : number \|string, z? : number \|string }	No	Translation effect during page transition, which is the value of the start point of entrance and the end point of exit. When this parameter is set together with slide, the latter takes effect by default. - x: translation distance along the x-axis. - y: translation distance along the y-axis. - z: translation distance along the y-axis.
scale	{ x? : number, y? : number, z? : number, centerX? : number \|string, centerY? : number \|string }	No	Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit. - x: scale ratio along the x-axis. - y: scale ratio along the y-axis. - z: scale ratio along the z-axis. - centerX and centerY: scale center point. The default values are both "50%", indicating that the center point of the page. - If the center point is (0, 0), it refers to the upper left corner of the component.
opacity	number	No	Opacity, which is the opacity value of the start point of entrance or the end point of exit.

SlideEffect

Name	Description
Left	When set to Enter, slides in from the left. When set to Exit, slides out to the left.
Right	When set to Enter, slides in from the right. When set to Exit, slides out to the right.
Top	When set to Enter, slides in from the top. When set to Exit, slides out to the top.
Bottom	When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom.

Events

Name	Description
onEnter(event: (type?: RouteType, progress?: number) => void)	Invoked once every animation frame until the entrance animation ends, when the value of progress changes from 0 to 1. The input parameter is the normalized progress of the current entrance animation. The value range is 0–1. - type: route type. - progress: current progress.
onExit(event: (type?: RouteType, progress?: number) => void)	Invoked once every animation frame until the exit animation ends, when the value of progress changes from 0 to 1. The input parameter is the normalized progress of the current exit animation. The value range is 0–1. - type: route type. - progress: current progress.

Example

Example 1: Apply the entrance animation of fade-in and the exit animation of zoom-out.

// index.ets
@Entry
@Component
struct PageTransitionExample1 {
  @State scale1: number = 1
  @State opacity1: number = 1

  build() {
    Column() {
      Navigator({ target: 'pages/page1', type: NavigationType.Push }) {
        Image($r('app.media.bg1')).width('100%').height('100%')    // Store the image in the media folder.
      }
    }.scale({ x: this.scale1 }).opacity(this.opacity1)
  }
  // Customize the transition process.
  pageTransition() {
    PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
      .onEnter((type?: RouteType, progress?: number) => {
        this.scale1 = 1
        this.opacity1 = progress as number
      }) // The onEnter callback is triggered frame by frame during the entrance process. The input parameter is the normalized progress of the animation (0% to 100%).
    PageTransitionExit({ duration: 1200, curve: Curve.Ease })
      .onExit((type?: RouteType, progress?: number) => {
        this.scale1 = 1 - (progress as number)
        this.opacity1 = 1
      }) // The onExit callback is triggered frame by frame during the exit process. The input parameter is the normalized progress of the animation (0% to 100%).
  }
}

// page1.ets
@Entry
@Component
struct AExample {
  @State scale2: number = 1
  @State opacity2: number = 1

  build() {
    Column() {
      Navigator({ target: 'pages/index', type: NavigationType.Push }) {
        Image($r('app.media.bg2')).width('100%').height('100%')   // Store the image in the media folder.
      }
    }.width('100%').height('100%').scale({ x: this.scale2 }).opacity(this.opacity2)
  }
  // Customize the transition process.
  pageTransition() {
    PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
      .onEnter((type?: RouteType, progress?: number) => {
        this.scale2 = 1
        this.opacity2 = progress as number
      }) // The onEnter callback is triggered frame by frame during the entrance process. The input parameter is the normalized progress of the animation (0% to 100%).
    PageTransitionExit({ duration: 1200, curve: Curve.Ease })
      .onExit((type?: RouteType, progress?: number) => {
        this.scale2 = 1 - (progress as number)
        this.opacity2 = 1
      }) // The onExit callback is triggered frame by frame during the exit process. The input parameter is the normalized progress of the animation (0% to 100%).
  }
}

pageTransition1

Example 2: Apply the entrance animation of sliding in from the left and the exit animation of translating with opacity change.

// index.ets 
@Entry
@Component
struct PageTransitionExample {
  build() {
    Column() {
      Navigator({ target: 'pages/page1', type: NavigationType.Push }) {
        Image($r('app.media.bg1')).width('100%').height('100%')   // Store the image in the media folder.
      }
    }
  }

  // Use the default effects provided by the system, such as translation, scaling, and opacity.
  pageTransition() {
    // Set the duration of the entrance animation to 1200 ms, in the purpose of matching the duration of the exit animation of the other page.
    PageTransitionEnter({ duration: 1200 })
      .slide(SlideEffect.Left)
    // Set the duration of the exit animation to 1000 ms, in the purpose of matching the duration of the entrance animation of the other page.
    PageTransitionExit({ duration: 1000 })
      .translate({ x: 100.0, y: 100.0 })
      .opacity(0)
  }
}

// page1.ets
@Entry
@Component
struct PageTransitionExample1 {
  build() {
    Column() {
      Navigator({ target: 'pages/index', type: NavigationType.Push }) {
        Image($r('app.media.bg2')).width('100%').height('100%')    // Store the image in the media folder.
      }
    }
  }

  // Use the default effects provided by the system, such as translation, scaling, and opacity.
  pageTransition() {
    // Set the duration of the entrance animation to 1000 ms, in the purpose of matching the duration of the exit animation of the other page.
    PageTransitionEnter({ duration: 1000 })
      .slide(SlideEffect.Left)
    // Set the duration of the exit animation to 1200 ms, in the purpose of matching the duration of the entrance animation of the other page.
    PageTransitionExit({ duration: 1200 })
      .translate({ x: 100.0, y: 100.0 })
      .opacity(0)
  }
}

pageTransition2