> The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
## Modules to Import
...
...
@@ -2526,12 +2527,12 @@ function onConsumeCallback(data) {
| touchstart | TouchEvent | Triggered when the tapping starts. For details about **TouchEvent**, see Table 2. | Yes<sup>5+</sup> |
| touchmove | TouchEvent | Triggered when the tapping moves. | Yes<sup>5+</sup> |
| touchcancel | TouchEvent | Triggered when the tapping is interrupted. | Yes<sup>5+</sup> |
| touchend | TouchEvent | Triggered when the tapping ends. | Yes<sup>5+</sup> |
| click | - | Triggered when a component is clicked. | Yes<sup>6+</sup> |
| doubleclick<sup>7+</sup> | - | Triggered when a component is double-clicked. | No<br>Bubbling is supported since API version 9. |
| longpress | - | Triggered when a component is long pressed. | No<br>Bubbling is supported since API version 9.|
| swipe<sup>5+</sup> | SwipeEvent | Triggered when a user quickly swipes on a component.<br/>For details about **SwipeEvent**, see Table 4. | No<br>Bubbling is supported since API version 9.|
| attached<sup>6+</sup> | - | Triggered after the current component node is mounted to the render tree. | No |
| detached<sup>6+</sup> | - | Triggered when the current component node is removed from the render tree. | No |
| pinchstart<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is started.<br>For details about **PinchEvent**, see Table 5.| No |
| pinchupdate<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is in progress. | No |
| pinchend<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is ended. | No |
| pinchcancel<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is interrupted. | No |
| dragstart<sup>7+</sup> | DragEvent | Triggered when dragging starts.<br>For details about **DragEvent**, see Table 6. | No |
| drag<sup>7+</sup> | DragEvent | Triggered when dragging is in progress. | No |
| dragend<sup>7+</sup> | DragEvent | Triggered when dragging is ended. | No |
| dragenter<sup>7+</sup> | DragEvent | Triggered when the dragged component enters a drop target. | No |
| dragover<sup>7+</sup> | DragEvent | Triggered when the dragged component is being dragged over a drop target. | No |
| dragleave<sup>7+</sup> | DragEvent | Triggered when the dragged component leaves a drop target. | No |
| drop<sup>7+</sup> | DragEvent | Triggered when the dragged component is dropped on a drop target. | No |
| touchstart | TouchEvent | Triggered when the tapping starts. For details about **TouchEvent**, see Table 2. | Yes<sup>5+</sup> | Yes<sup>5+</sup> |
| touchmove | TouchEvent | Triggered when the tapping moves. | Yes<sup>5+</sup> | Yes<sup>5+</sup> |
| touchcancel | TouchEvent | Triggered when the tapping is interrupted. | Yes<sup>5+</sup> | Yes<sup>5+</sup> |
| touchend | TouchEvent | Triggered when the tapping ends. | Yes<sup>5+</sup> | Yes<sup>5+</sup> |
| click | - | Triggered when a component is clicked. | Yes<sup>6+</sup> | No |
| doubleclick<sup>7+</sup> | - | Triggered when a component is double-clicked. | No<br>Bubbling is supported since API version 9. | No |
| longpress | - | Triggered when a component is long pressed. | No<br>Bubbling is supported since API version 9.| No |
| swipe<sup>5+</sup> | SwipeEvent | Triggered when a user quickly swipes on a component.<br/>For details about **SwipeEvent**, see Table 4. | No<br>Bubbling is supported since API version 9.| No |
| attached<sup>6+</sup> | - | Triggered after the current component node is mounted to the render tree. | No | No |
| detached<sup>6+</sup> | - | Triggered when the current component node is removed from the render tree. | No | No |
| pinchstart<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is started.<br>For details about **PinchEvent**, see Table 5.| No | No |
| pinchupdate<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is in progress. | No | No |
| pinchend<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is ended. | No | No |
| pinchcancel<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is interrupted. | No | No |
| dragstart<sup>7+</sup> | DragEvent | Triggered when dragging starts.<br>For details about **DragEvent**, see Table 6. | No | No |
| drag<sup>7+</sup> | DragEvent | Triggered when dragging is in progress. | No | No |
| dragend<sup>7+</sup> | DragEvent | Triggered when dragging is ended. | No | No |
| dragenter<sup>7+</sup> | DragEvent | Triggered when the dragged component enters a drop target. | No | No |
| dragover<sup>7+</sup> | DragEvent | Triggered when the dragged component is being dragged over a drop target. | No | No |
| dragleave<sup>7+</sup> | DragEvent | Triggered when the dragged component leaves a drop target. | No | No |
| drop<sup>7+</sup> | DragEvent | Triggered when the dragged component is dropped on a drop target. | No | No |
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
Customize the page transition animations by configuring the page entrance and exit components in the global **pageTransition** method.
| Name | Parameter | Description |
| 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 |
| Name | Type | Default Value | Mandatory | Description |
| slide | SlideEffect | SlideEffect.Right | No | Slide effect during page transition. For details about the valid values, see the description of [ERROR:Invalid link:en-us_topic_0000001257138309.xml#xref2991922111212,link:#li81331342185820](#li81331342185820). |
| 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. |
| slide | SlideEffect | SlideEffect.Right | No | Slide effect during page transition. For details, 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. |
- SlideEffect enums
| Name | Description |
| 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. |
| 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:
| Event | Description |
| Event | Description |
| -------- | -------- |
| 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. |
| 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
...
...
@@ -70,8 +71,8 @@ Customization method 1: The entrance animation of the current page is configured
}) // 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%).
}) // 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%).
}) // 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%).
}) // 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%).
}
}
...
...
@@ -141,8 +142,8 @@ Customization method 2: The entrance animation of the current page is configured