1# Page Transition 2 3You can customize the page entrance and exit animations in the **pageTransition** API for transition between pages. For details, see [Page Transition Animation](../../ui/arkts-page-transition-animation.md). 4 5> **NOTE** 6> 7> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8> 9> To achieve a better transition effect, you are advised to use the [\<Navigation>](../../ui/arkts-navigation-navigation.md) component and [modal transition](../../ui/arkts-modal-transition.md). 10 11 12| Name | Parameter | Mandatory| Description | 13| ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 14| PageTransitionEnter | {<br>type?: [RouteType](#routetype),<br>duration?: number,<br>curve?: [Curve](ts-appendix-enums.md#curve) \| string \| [ICurve](../apis/js-apis-curve.md#icurve)<sup>10+</sup>,<br>delay?: number<br>} | No | Page entrance animation.<br>- **type**: route type for the page transition effect to take effect.<br>Default value: **RouteType.None**<br>- **duration**: animation duration.<br>Unit: ms<br>Default value: **1000**<br>- **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".<br>Default value: **Curve.Linear**<br>- **delay**: animation delay.<br>Unit: ms<br>Default value: **0**<br>**NOTE**<br>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**.| 15| PageTransitionExit | {<br>type?: [RouteType](#routetype),<br>duration?: number,<br>curve?: [Curve](ts-appendix-enums.md#curve) \| string \| [ICurve](../apis/js-apis-curve.md#icurve)<sup>10+</sup>,<br>delay?: number<br>} | No | Page exit animation.<br>- **type**: route type for the page transition effect to take effect.<br>Default value: **RouteType.None**<br>- **duration**: animation duration.<br>Unit: ms<br>Default value: **1000**<br>- **curve**: animation curve. The value range of the string type is the same as that of **PageTransitionEnter**.<br>Default value: **Curve.Linear**<br>- **delay**: animation delay.<br>Unit: ms<br>Default value: **0**<br>**NOTE**<br>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**.| 16 17## RouteType 18 19| Name| Description | 20| ---- | ------------------------------------------------------------ | 21| 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.| 22| 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.| 23| 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.| 24 25 26## Attributes 27 28| Name | Type | Mandatory| Description | 29| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 30| slide | [SlideEffect](#slideeffect) | No | Slide effect during page transition.| 31| 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.<br>- **x**: translation distance along the x-axis.<br>- **y**: translation distance along the y-axis.<br>- **z**: translation distance along the y-axis.| 32| 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.<br>- **x**: scale ratio along the x-axis.<br>- **y**: scale ratio along the y-axis.<br>- **z**: scale ratio along the z-axis.<br>- **centerX** and **centerY**: scale center point. The default values are both **"50%"**, indicating that the center point of the page.<br>- If the center point is (0, 0), it refers to the upper left corner of the component.<br>| 33| opacity | number | No | Opacity, which is the opacity value of the start point of entrance or the end point of exit.| 34 35## SlideEffect 36 37| Name | Description | 38| ------ | ------------------------- | 39| Left | When set to Enter, slides in from the left. When set to Exit, slides out to the left.| 40| Right | When set to Enter, slides in from the right. When set to Exit, slides out to the right.| 41| Top | When set to Enter, slides in from the top. When set to Exit, slides out to the top.| 42| Bottom | When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom.| 43 44 45## Events 46 47| Name | Description | 48| ------------------------------------------------------------ | ------------------------------------------------------------ | 49| 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.<br>- **type**: route type.<br>- **progress**: current progress.<br> <br> | 50| 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.<br>- **type**: route type.<br>- **progress**: current progress.<br> <br> | 51 52 53## Example 54 55Example 1: Apply the entrance animation of fade-in and the exit animation of zoom-out. 56 57```ts 58// index.ets 59@Entry 60@Component 61struct PageTransitionExample1 { 62 @State scale1: number = 1 63 @State opacity1: number = 1 64 65 build() { 66 Column() { 67 Navigator({ target: 'pages/page1', type: NavigationType.Push }) { 68 Image($r('app.media.bg1')).width('100%').height('100%') // Store the image in the media folder. 69 } 70 }.scale({ x: this.scale1 }).opacity(this.opacity1) 71 } 72 // Customize the transition process. 73 pageTransition() { 74 PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) 75 .onEnter((type?: RouteType, progress?: number) => { 76 this.scale1 = 1 77 this.opacity1 = progress as number 78 }) // 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%). 79 PageTransitionExit({ duration: 1200, curve: Curve.Ease }) 80 .onExit((type?: RouteType, progress?: number) => { 81 this.scale1 = 1 - (progress as number) 82 this.opacity1 = 1 83 }) // 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%). 84 } 85} 86``` 87 88```ts 89// page1.ets 90@Entry 91@Component 92struct AExample { 93 @State scale2: number = 1 94 @State opacity2: number = 1 95 96 build() { 97 Column() { 98 Navigator({ target: 'pages/index', type: NavigationType.Push }) { 99 Image($r('app.media.bg2')).width('100%').height('100%') // Store the image in the media folder. 100 } 101 }.width('100%').height('100%').scale({ x: this.scale2 }).opacity(this.opacity2) 102 } 103 // Customize the transition process. 104 pageTransition() { 105 PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) 106 .onEnter((type?: RouteType, progress?: number) => { 107 this.scale2 = 1 108 this.opacity2 = progress as number 109 }) // 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%). 110 PageTransitionExit({ duration: 1200, curve: Curve.Ease }) 111 .onExit((type?: RouteType, progress?: number) => { 112 this.scale2 = 1 - (progress as number) 113 this.opacity2 = 1 114 }) // 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%). 115 } 116} 117``` 118 119 120 121Example 2: Apply the entrance animation of sliding in from the left and the exit animation of translating with opacity change. 122 123```ts 124// index.ets 125@Entry 126@Component 127struct PageTransitionExample { 128 build() { 129 Column() { 130 Navigator({ target: 'pages/page1', type: NavigationType.Push }) { 131 Image($r('app.media.bg1')).width('100%').height('100%') // Store the image in the media folder. 132 } 133 } 134 } 135 136 // Use the default effects provided by the system, such as translation, scaling, and opacity. 137 pageTransition() { 138 // 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. 139 PageTransitionEnter({ duration: 1200 }) 140 .slide(SlideEffect.Left) 141 // 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. 142 PageTransitionExit({ duration: 1000 }) 143 .translate({ x: 100.0, y: 100.0 }) 144 .opacity(0) 145 } 146} 147``` 148 149```ts 150// page1.ets 151@Entry 152@Component 153struct PageTransitionExample1 { 154 build() { 155 Column() { 156 Navigator({ target: 'pages/index', type: NavigationType.Push }) { 157 Image($r('app.media.bg2')).width('100%').height('100%') // Store the image in the media folder. 158 } 159 } 160 } 161 162 // Use the default effects provided by the system, such as translation, scaling, and opacity. 163 pageTransition() { 164 // 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. 165 PageTransitionEnter({ duration: 1000 }) 166 .slide(SlideEffect.Left) 167 // 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. 168 PageTransitionExit({ duration: 1200 }) 169 .translate({ x: 100.0, y: 100.0 }) 170 .opacity(0) 171 } 172} 173``` 174 175 176
