# 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 \| Curves,
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](ts-animatorproperty.md).
Default value: **Curve.Linear**
- **delay**: animation delay, in milliseconds. By default, the animation is played without delay.|
| PageTransitionExit | {
type: RouteType,
duration: number,
curve: Curve \| Curves,
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](ts-animatorproperty.md).
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.
```ts
// 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%).
}
}
```
```ts
// 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.
```ts
// 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)
}
}
```
```ts
// 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)
}
}
```
