1# Page Transition 2 3The page transition navigates users between pages. You can customize page transitions by configuring the page entrance and exit components in the **pageTransition** API. 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 10 11| Name | Parameter | Mandatory| Description | 12| ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 13| PageTransitionEnter | {<br>type?: RouteType,<br>duration?: number,<br>curve?: [Curve](ts-appendix-enums.md#curve) \| string,<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>**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**.<br>- **duration**: animation duration.<br>Unit: ms<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>Default value: **0**<br>Unit: ms| 14| PageTransitionExit | {<br>type?: RouteType,<br>duration?: number,<br>curve?: [Curve](ts-appendix-enums.md#curve) \| string,<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>**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**.<br>- **duration**: animation duration, in milliseconds.<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>Default value: **0**<br>Unit: ms| 15 16## RouteType 17 18| Name| Description | 19| ---- | ------------------------------------------------------------ | 20| 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.| 21| 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.| 22| 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.| 23 24 25## Attributes 26 27| Name | Type | Mandatory| Description | 28| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 29| slide | [SlideEffect](#slideeffect) | No | Slide effect during page transition.<br>Default value: **SlideEffect.Right**| 30| 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.| 31| 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.<br>- If the center point is 0, it refers to the upper left corner of the component. | 32| opacity | number | No | Opacity, which is the opacity value of the start point of entrance or the end point of exit.<br>Default value: **1**| 33 34## SlideEffect 35 36| Name | Description | 37| ------ | ------------------------- | 38| Left | When set to Enter, slides in from the left. When set to Exit, slides out to the left.| 39| Right | When set to Enter, slides in from the right. When set to Exit, slides out to the right.| 40| Top | When set to Enter, slides in from the top. When set to Exit, slides out to the top.| 41| Bottom | When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom.| 42 43 44## Events 45 46| Name | Description | 47| ------------------------------------------------------------ | ------------------------------------------------------------ | 48| 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. | 49| 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. | 50 51 52## Example 53 54Customization method 1: The entrance animation of the current page is configured as fade-in, and the exit animation is configured as zoom-out. 55 56```ts 57// index.ets 58@Entry 59@Component 60struct PageTransitionExample1 { 61 @State scale1: number = 1 62 @State opacity1: number = 1 63 64 build() { 65 Column() { 66 Navigator({ target: 'pages/page1', type: NavigationType.Push }) { 67 Image($r('app.media.bg1')).width('100%').height('100%') // Store the image in the media folder. 68 } 69 }.scale({ x: this.scale1 }).opacity(this.opacity1) 70 } 71 // Customization method 1: Customize the transition process. 72 pageTransition() { 73 PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) 74 .onEnter((type: RouteType, progress: number) => { 75 this.scale1 = 1 76 this.opacity1 = progress 77 }) // 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%). 78 PageTransitionExit({ duration: 1500, curve: Curve.Ease }) 79 .onExit((type: RouteType, progress: number) => { 80 this.scale1 = 1 - progress 81 this.opacity1 = 1 82 }) // 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%). 83 } 84} 85``` 86 87```ts 88// page1.ets 89@Entry 90@Component 91struct AExample { 92 @State scale2: number = 1 93 @State opacity2: number = 1 94 95 build() { 96 Column() { 97 Navigator({ target: 'pages/index', type: NavigationType.Push }) { 98 Image($r('app.media.bg2')).width('100%').height('100%') // Store the image in the media folder. 99 } 100 }.width('100%').height('100%').scale({ x: this.scale2 }).opacity(this.opacity2) 101 } 102 // Customization method 1: Customize the transition process. 103 pageTransition() { 104 PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) 105 .onEnter((type: RouteType, progress: number) => { 106 this.scale2 = 1 107 this.opacity2 = progress 108 }) // 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%). 109 PageTransitionExit({ duration: 1500, curve: Curve.Ease }) 110 .onExit((type: RouteType, progress: number) => { 111 this.scale2 = 1 - progress 112 this.opacity2 = 1 113 }) // 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%). 114 } 115} 116``` 117 118 119 120Customization 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. 121 122```ts 123// index.ets 124@Entry 125@Component 126struct PageTransitionExample { 127 @State scale1: number = 1 128 @State opacity1: number = 1 129 130 build() { 131 Column() { 132 Navigator({ target: 'pages/page1', type: NavigationType.Push }) { 133 Image($r('app.media.bg1')).width('100%').height('100%') // Store the image in the media folder. 134 } 135 }.scale({ x: this.scale1 }).opacity(this.opacity1) 136 } 137 138 // Customization method 2: Use the default effects provided by the system, such as translation, scaling, and opacity. 139 pageTransition() { 140 PageTransitionEnter({ duration: 1200 }) 141 .slide(SlideEffect.Left) 142 PageTransitionExit({ delay: 100 }) 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 @State scale2: number = 1 155 @State opacity2: number = 1 156 157 build() { 158 Column() { 159 Navigator({ target: 'pages/index', type: NavigationType.Push }) { 160 Image($r('app.media.bg2')).width('100%').height('100%') // Store the image in the media folder. 161 } 162 }.scale({ x: this.scale2 }).opacity(this.opacity2) 163 } 164 165 // Customization method 2: Use the default effects provided by the system, such as translation, scaling, and opacity. 166 pageTransition() { 167 PageTransitionEnter({ duration: 1200 }) 168 .slide(SlideEffect.Left) 169 PageTransitionExit({ delay: 100 }) 170 .translate({ x: 100.0, y: 100.0 }) 171 .opacity(0) 172 } 173} 174``` 175 176 177
