Page Transition
The page transition navigates users between pages. You can customize page transitions by configuring the page entrance and exit components in the global pageTransition API.
NOTE
This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
Name | Parameter | Description |
---|---|---|
PageTransitionEnter | { type: RouteType, duration: number, curve: Curve | string, delay: number } |
Page entrance animation. - type: If this parameter is not set, the reverse playback effect as pop switches to push is used. - duration: animation duration, in milliseconds. - curve: animation curve. For details about the valid values, see Curve. Default value: Curve.Linear - delay: animation delay, in milliseconds. By default, the animation is played without delay. |
PageTransitionExit | { type: RouteType, duration: number, curve: Curve | string, delay: number } |
Page exit animation. - type:If this parameter is not set, the reverse playback effect as pop switches to push is used. - duration: animation duration, in milliseconds. - curve: animation curve. For details about the valid values, see Curve. Default value: Curve.Linear - delay: animation delay, in milliseconds. By default, the animation is played without delay. |
RouteType enums
Name | Description |
---|---|
Pop | Redirects to a specified page. When the user is redirected from page A to page B, page A is Exit+Push, and page B is Enter+Push. |
Push | Redirects to the next page. When the user is redirected back from page B to page A, page A is Enter+Pop, and page B is Exit+Pop. |
None | The page is not redirected. |
Attributes
Name | Type | Mandatory | Description |
---|---|---|---|
slide | SlideEffect | No | Slide effect during page transition. Default value: SlideEffect.Right |
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. - If the center point is 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. Default value: 1 |
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) | The callback 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) | The callback input parameter is the normalized progress of the current exit animation. The value range is 0–1. - type: route type. - progress: current progress. |
Example
Customization method 1: The entrance animation of the current page is configured as fade-in, and the exit animation is configured as 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%")
}
}.scale({ x: this.scale1 }).opacity(this.opacity1)
}
// Customization method 1: Customize the transition process.
pageTransition() {
PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
.onEnter((type: RouteType, progress: number) => {
this.scale1 = 1
this.opacity1 = progress
}) // 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: 1500, curve: Curve.Ease })
.onExit((type: RouteType, progress: number) => {
this.scale1 = 1 - progress
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%")
}
}.height("100%").width("100%").scale({ x: this.scale2 }).opacity(this.opacity2)
}
// Customization method 1: Customize the transition process.
pageTransition() {
PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
.onEnter((type: RouteType, progress: number) => {
this.scale2 = 1
this.opacity2 = progress
}) // 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: 1500, curve: Curve.Ease })
.onExit((type: RouteType, progress: number) => {
this.scale2 = 1 - progress
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%).
}
}
Customization method 2: The entrance animation of the current page is configured to slide in from the left, and the exit animation is configured to zoom out with opacity change.
// index.ets
@Entry
@Component
struct PageTransitionExample {
@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%")
}
}.scale({ x: this.scale1 }).opacity(this.opacity1)
}
// Customization method 2: Use the default effects provided by the system, such as translation, scaling, and opacity.
pageTransition() {
PageTransitionEnter({ duration: 1200 })
.slide(SlideEffect.Left)
PageTransitionExit({ delay: 100 })
.translate({ x: 100.0, y: 100.0 })
.opacity(0)
}
}
// page1.ets
@Entry
@Component
struct PageTransitionExample1 {
@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%")
}
}.scale({ x: this.scale2 }).opacity(this.opacity2)
}
// Customization method 2: Use the default effects provided by the system, such as translation, scaling, and opacity.
pageTransition() {
PageTransitionEnter({ duration: 1200 })
.slide(SlideEffect.Left)
PageTransitionExit({ delay: 100 })
.translate({ x: 100.0, y: 100.0 })
.opacity(0)
}
}