1# Page Transition (pageTransition) 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## pageTransition 12 13pageTransition?(): void 14 15Defines the transition animation to play when the user accesses this page or is redirected from this page to another page. 16 17**System capability**: SystemCapability.ArkUI.ArkUI.Full 18 19## PageTransitionEnter 20 21PageTransitionEnter(value: PageTransitionOptions) 22 23Page entrance animation. 24 25**System capability**: SystemCapability.ArkUI.ArkUI.Full 26 27**Parameters** 28 29| Name| Type | Mandatory| Description | 30| ------ | ------------------------------------------------------ | ---- | -------------------- | 31| value | [PageTransitionOptions](#pagetransitionoptions) | Yes | Page entrance animation.| 32 33## PageTransitionExit 34 35PageTransitionExit(value: PageTransitionOptions) 36 37Page exit animation. 38 39**System capability**: SystemCapability.ArkUI.ArkUI.Full 40 41**Parameters** 42 43| Name| Type | Mandatory| Description | 44| ------ | ------------------------------------------------------- | ---- | -------------------- | 45| value | [PageTransitionOptions](#pagetransitionoptions) | Yes | Page exit animation.| 46 47## PageTransitionOptions 48 49 50| Name | Type | Mandatory| Description | 51| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 52| type | [RouteType](#routetype) | No | Route type for the page transition effect to take effect.<br>Default value: **RouteType.None** | 53| duration | number | No | Animation duration.<br>Unit: ms<br>Default value: **1000** | 54| curve | [Curve](ts-appendix-enums.md#curve) \| string \| [ICurve](../apis/js-apis-curve.md#icurve)<sup>10+</sup> | No | 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**| 55| delay | number | No | 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**.| 56 57 58## Attributes 59 60| Name | Type | Mandatory| Description | 61| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 62| slide | [SlideEffect](#slideeffect) | No | Slide effect during page transition.| 63| 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.| 64| 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>| 65| opacity | number | No | Opacity, which is the opacity value of the start point of entrance or the end point of exit.| 66 67 68## Events 69 70| Name | Description | 71| ------------------------------------------------------------ | ------------------------------------------------------------ | 72| onEnter(event: (type: [RouteType](#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> | 73| onExit(event: (type: [RouteType](#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> | 74 75## RouteType 76 77| Name| Description | 78| ---- | ------------------------------------------------------------ | 79| 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.| 80| 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.| 81| 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.| 82 83## SlideEffect 84 85| Name | Description | 86| ------ | -------------------------------------------------- | 87| Left | When set to Enter, slides in from the left. When set to Exit, slides out to the left.| 88| Right | When set to Enter, slides in from the right. When set to Exit, slides out to the right.| 89| Top | When set to Enter, slides in from the top. When set to Exit, slides out to the top.| 90| Bottom | When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom.| 91 92## Example 93 94Example 1: Apply different exit and entry animations based on different exit and entry types. 95 96```ts 97// index.ets 98import router from '@ohos.router' 99 100@Entry 101@Component 102struct Index { 103 @State scale1: number = 1 104 @State opacity1: number = 1 105 106 build() { 107 Column() { 108 Image($r("app.media.transition_image1")).width('100%').height('100%') 109 } 110 .width('100%') 111 .height('100%') 112 .scale({ x: this.scale1 }) 113 .opacity(this.opacity1) 114 .onClick(() => { 115 router.pushUrl({ url: 'pages/Page1' }) 116 }) 117 } 118 119 pageTransition() { 120 PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) 121 .onEnter((type: RouteType, progress: number) => { 122 if (type == RouteType.Push||type == RouteType.Pop) { 123 this.scale1 = progress 124 this.opacity1 = progress 125 } 126 }) 127 PageTransitionExit({ duration: 1200, curve: Curve.Ease }) 128 .onExit((type: RouteType, progress: number) => { 129 if (type == RouteType.Push) { 130 this.scale1 = 1 - progress 131 this.opacity1 = 1 - progress 132 } 133 }) 134 } 135} 136``` 137 138```ts 139// page1.ets 140import router from '@ohos.router' 141 142@Entry 143@Component 144struct Page1 { 145 @State scale2: number = 1 146 @State opacity2: number = 1 147 148 build() { 149 Column() { 150 Image($r("app.media.transition_image2")).width('100%').height('100%') // Store the image in the media folder. 151 } 152 .width('100%') 153 .height('100%') 154 .scale({ x: this.scale2 }) 155 .opacity(this.opacity2) 156 .onClick(() => { 157 router.pushUrl({ url: 'pages/Index' }) 158 }) 159 } 160 161 pageTransition() { 162 PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) 163 .onEnter((type: RouteType, progress: number) => { 164 if(type==RouteType.Push || type == RouteType.Pop) 165 this.scale2 = progress 166 this.opacity2 = progress 167 168 }) 169 PageTransitionExit({ duration: 1200, curve: Curve.Ease }) 170 .onExit((type: RouteType, progress: number) => { 171 if (type == RouteType.Pop) { 172 this.scale2 = 1 - progress 173 this.opacity2 = 1 - progress 174 } 175 }) 176 } 177} 178``` 179 180 181 182Example 2: Apply the entrance animation of sliding in from the left and the exit animation of translating with opacity change. 183 184```ts 185// index.ets 186@Entry 187@Component 188struct PageTransitionExample { 189 build() { 190 Column() { 191 Navigator({ target: 'pages/page1', type: NavigationType.Push }) { 192 Image($r('app.media.bg1')).width('100%').height('100%') // Store the image in the media folder. 193 } 194 } 195 } 196 197 // Use the default effects provided by the system, such as translation, scaling, and opacity. 198 pageTransition() { 199 // 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. 200 PageTransitionEnter({ duration: 1200 }) 201 .slide(SlideEffect.Left) 202 // 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. 203 PageTransitionExit({ duration: 1000 }) 204 .translate({ x: 100.0, y: 100.0 }) 205 .opacity(0) 206 } 207} 208``` 209 210```ts 211// page1.ets 212@Entry 213@Component 214struct PageTransitionExample1 { 215 build() { 216 Column() { 217 Navigator({ target: 'pages/index', type: NavigationType.Push }) { 218 Image($r('app.media.bg2')).width('100%').height('100%') // Store the image in the media folder. 219 } 220 } 221 } 222 223 // Use the default effects provided by the system, such as translation, scaling, and opacity. 224 pageTransition() { 225 // 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. 226 PageTransitionEnter({ duration: 1000 }) 227 .slide(SlideEffect.Left) 228 // 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. 229 PageTransitionExit({ duration: 1200 }) 230 .translate({ x: 100.0, y: 100.0 }) 231 .opacity(0) 232 } 233} 234``` 235 236 237