Customize the page transition animations by configuring the page entrance and exit components in the global **pageTransition** method.
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 animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## APIs
| Name | Parameter | Description |
| -------- | -------- | -------- |
| PageTransitionEnter | Object | Page entrance component, which is used to customize the entrance effect of the current page. For details, see animation parameters. |
| PageTransitionExit | Object | Page exit component, which is used to customize the exit effect of the current page. For details, see animation parameters. |
| PageTransitionEnter | Object | Page entrance component, which is used to customize the entrance effect of the current page. For details, see animation parameters.|
| PageTransitionExit | Object | Page exit component, which is used to customize the exit effect of the current page. For details, see animation parameters.|
- Animation parameters
| Name | Type | Default Value | Mandatory | Description |
| slide | SlideEffect | SlideEffect.Right | No | Slide effect during page transition. For details about the valid values, see **SlideEffect enums**. |
| translate | {<br/>x? : number,<br/>y? : number,<br/>z? : number<br/>} | - | 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. |
| scale | {<br/>x? : number,<br/>y? : number,<br/>z? : number,<br/>centerX? : number,<br/>centerY? : number<br/>} | - | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit. |
| opacity | number | 1 | No | Opacity, which is the opacity value of the start point of entrance or the end point of exit. |
| Name | Type | Default Value | Mandatory | Description |
| slide | SlideEffect | SlideEffect.Right | No | Slide effect during page transition. For details about the valid values, see **SlideEffect** enums. |
| translate | {<br>x? : number \| string,<br>y? : number \| string,<br>z? : number \| string<br>} | - | 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.|
| scale | {<br>x? : number,<br>y? : number,<br>z? : number,<br>centerX? : number \| string,<br>centerY? : number \| string<br>} | - | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit. |
| opacity | number | 1 | No | Opacity, which is the opacity value of the start point of entrance or the end point of exit. |
- SlideEffect enums
| 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.|
| 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
The PageTransitionEnter and PageTransitionExit components support the following events:
The **PageTransitionEnter** and **PageTransitionExit** parameters support the following events:
| Event | Description |
| -------- | -------- |
| onEnter(type: RouteType, progress: number) => void | Callback invoked when page entrance occurs. The input parameter is the normalized progress of the current entrance animation. The value range is 0–1. |
| onExit(type: RouteType, progress: number) => void | Callback invoked when page exit occurs. The input parameter is the normalized progress of the current exit animation. The value range is 0–1. |
| onEnter(type: RouteType, progress: number) => void | The callback input parameter is the normalized progress of the current entrance animation. The value range is 0–1.|
| onExit(type: RouteType, progress: number) => void | The callback input parameter is the normalized progress of the current exit animation. The value range is 0–1.|
## 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.
}) // The onExit callback is triggered frame by frame during the exi process. The input parameter is the normalized progress of the animation (0% to 100%).
})// 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%).
}
}
```
...
...
@@ -136,23 +129,19 @@ struct AExample {
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.