1# Page Transition Animation (Not Recommended) 2 3To achieve a better transition effect, you are advised to use the [Navigation](arkts-navigation-transition.md) component and [modal transition](arkts-modal-transition.md). 4 5During page redirection, one page enters and the other page exits. You can customize the [page transition effects](../reference/apis-arkui/arkui-ts/ts-page-transition-animation.md) for these pages through the **pageTransition** function. Specifically, [PageTransitionEnter](../reference/apis-arkui/arkui-ts/ts-page-transition-animation.md#pagetransitionenter) defines the page entrance animation, while [PageTransitionExit](../reference/apis-arkui/arkui-ts/ts-page-transition-animation.md#pagetransitionexit) defines the page exit animation. 6The **pageTransition** function is as follows: 7 8```ts 9pageTransition() { 10 PageTransitionEnter() 11 PageTransitionExit() 12} 13``` 14 15 16API of **PageTransitionEnter**: 17 18```ts 19PageTransitionEnter({type?: RouteType,duration?: number,curve?: Curve | string,delay?: number}) 20``` 21 22 23API of **PageTransitionExit**: 24 25```ts 26PageTransitionExit({type?: RouteType,duration?: number,curve?: Curve | string,delay?: number}) 27``` 28 29 30Both **PageTransitionEnter** and **PageTransitionExit** contain the **slide**, **translate**, **scale**, and **opacity** attributes. For **PageTransitionEnter**, these attributes indicate the start values for page entrance. For **PageTransitionExit**, these attributes indicate the end values for page exit. In this sense, configuration of page transition is similar to that of component transition. **PageTransitionEnter** provides the **onEnter** callback, and **PageTransitionExit** provides the **onExit** callback. 31 32 33In the preceding APIs, the **type** parameter indicates the route type used in page navigation. Each page transition involves exit of one page and entrance of the other. If you switch from page A to page B through the **router.pushUrl** operation, page A exits, with the exit animation applied; and page B enters, with the entrance animation applied. If you switch from page B back to page A through the **router.back** operation, page B exits, , with the exit animation applied; and page A enters, with the entrance animation applied. That is, **PageTransitionEnter** of a page may be an entrance animation of a new page (pushed to the stack) or of an existing page (popped from the stack). To distinguish these two types of entrance animations, the **type** parameter is provided. 34 35 36## Setting type to RouteType.None 37 38When **type** is set to **RouteType.None** (default value), the page transition animations work for both the push and pop operations in the page stack. 39 40 41```ts 42// page A 43pageTransition() { 44 // Configure the page entrance animation to sliding in from the left, with the duration of 1200 ms. The settings take effect no matter whether the push or pop operation is performed on the page stack. 45 PageTransitionEnter({ type: RouteType.None, duration: 1200 }) 46 .slide(SlideEffect.Left) 47 // Configure the page exit animation to sliding out from the left, with the duration of 1000 ms. The settings take effect no matter whether the push or pop operation is performed on the page stack. 48 PageTransitionExit({ type: RouteType.None, duration: 1000 }) 49 .slide(SlideEffect.Left) 50} 51``` 52 53```ts 54// page B 55pageTransition() { 56 // Configure the page entrance animation to sliding in from the right, with the duration of 1000 ms. The settings take effect no matter whether the push or pop operation is performed on the page stack. 57 PageTransitionEnter({ type: RouteType.None, duration: 1000 }) 58 .slide(SlideEffect.Right) 59 // Configure the page exit animation to sliding out from the right, with the duration of 1200 ms. The settings take effect no matter whether the push or pop operation is performed on the page stack. 60 PageTransitionExit({ type: RouteType.None, duration: 1200 }) 61 .slide(SlideEffect.Right) 62} 63``` 64 65 66Assume that the page navigation is in the multi-instance mode, which means that duplicate pages are allowed in the page stack. There may be four scenarios. The following table lists the page transition effects. 67 68 69| Route Operation | Page A Transition Effect | Page B Transition Effect | 70| ---------------------------- | ---------------------------------- | ---------------------------------- | 71| **router.pushUrl**, navigating from page A to a new instance of page B| The page exits. The animation defined by **PageTransitionExit** is applied. In the example, the page slides out from the left of the screen. | The page enters. The animation defined by **PageTransitionEnter** is applied. In the example, the page slides in from the right of the screen.| 72| **router.back**, returning from page B back to page A | The page enters. The animation defined by **PageTransitionEnter** is applied. In the example, the page slides in from the left of the screen.| The page exits. The animation defined by **PageTransitionExit** is applied. In the example, the page slides out from the right of the screen. | 73| **router.pushUrl**, navigating from page B to a new instance of page A| The page enters. The animation defined by **PageTransitionEnter** is applied. In the example, the page slides in from the left of the screen.| The page exits. The animation defined by **PageTransitionExit** is applied. In the example, the page slides out from the right of the screen. | 74| **router.back**, returning from page A back to page B | The page exits. The animation defined by **PageTransitionExit** is applied. In the example, the page slides out from the left of the screen. | The page enters. The animation defined by **PageTransitionEnter** is applied. In the example, the page slides in from the right of the screen.| 75 76 77If you want the page accessed by **router.pushUrl** to always slide in from the right and the page exited by **router.back** to always slide out from the right, the third and fourth cases in the preceding table do not meet the requirements. In this case, you need to define four page transition effects. 78 79 80## Setting type to RouteType.Push or RouteType.Pop 81 82When **type** is set to **RouteType.Push**, the page transition animations work for only both the push operations in the page stack. When **type** is set to **RouteType.Pop**, the page transition animations work for only both the pop operations in the page stack. 83 84 85```ts 86// page A 87pageTransition() { 88 // Configure the page entrance animation to sliding in from the right, with the duration of 1200 ms. The settings take effect only when the push operation is performed on the page stack. 89 PageTransitionEnter({ type: RouteType.Push, duration: 1200 }) 90 .slide(SlideEffect.Right) 91 // Configure the page entrance animation to sliding in from the left, with the duration of 1200 ms. The settings take effect only when the pop operation is performed on the page stack. 92 PageTransitionEnter({ type: RouteType.Pop, duration: 1200 }) 93 .slide(SlideEffect.Left) 94 // Configure the page exit animation to sliding out from the left, with the duration of 1000 ms. The settings take effect only when the push operation is performed on the page stack. 95 PageTransitionExit({ type: RouteType.Push, duration: 1000 }) 96 .slide(SlideEffect.Left) 97 // Configure the page exit animation to sliding out from the right, with the duration of 1000 ms. The settings take effect only when the pop operation is performed on the page stack. 98 PageTransitionExit({ type: RouteType.Pop, duration: 1000 }) 99 .slide(SlideEffect.Right) 100} 101``` 102 103```ts 104// page B 105pageTransition() { 106 // Configure the page entrance animation to sliding in from the right, with the duration of 1000 ms. The settings take effect only when the push operation is performed on the page stack. 107 PageTransitionEnter({ type: RouteType.Push, duration: 1000 }) 108 .slide(SlideEffect.Right) 109 // Configure the page entrance animation to sliding in from the left, with the duration of 1000 ms. The settings take effect only when the pop operation is performed on the page stack. 110 PageTransitionEnter({ type: RouteType.Pop, duration: 1000 }) 111 .slide(SlideEffect.Left) 112 // Configure the page exit animation to sliding out from the left, with the duration of 1200 ms. The settings take effect only when the push operation is performed on the page stack. 113 PageTransitionExit({ type: RouteType.Push, duration: 1200 }) 114 .slide(SlideEffect.Left) 115 // Configure the page exit animation to sliding out from the right, with the duration of 1200 ms. The settings take effect only when the pop operation is performed on the page stack. 116 PageTransitionExit({ type: RouteType.Pop, duration: 1200 }) 117 .slide(SlideEffect.Right) 118} 119``` 120 121 122The preceding code defines page transition effects for all possibles scenarios. Assume that the page navigation is in the multi-instance mode, which means that duplicate pages are allowed in the page stack. There may be four scenarios. The following table lists the page transition effects. 123 124 125| Route Operation | Page A Transition Effect | Page B Transition Effect | 126| ---------------------------- | ---------------------------------------- | ---------------------------------------- | 127| **router.pushUrl**, navigating from page A to a new instance of page B| The page exits. The transition style of **PageTransitionExit** whose **type** is **RouteType.Push** takes effect. The page slides out from the left of the screen.| The page enters. The transition style of **PageTransitionEnter** whose **type** is **RouteType.Push** takes effect. The page slides in from the right of the screen.| 128| **router.back**, returning from page B back to page A | The page enters. The transition style of **PageTransitionEnter** whose **type** is **RouteType.Pop** takes effect. The page slides in from the left of the screen.| The page exits. The transition style of **PageTransitionExit** whose **type** is **RouteType.Pop** takes effect. The page slides out from the right of the screen.| 129| **router.pushUrl**, navigating from page B to a new instance of page A| The page enters. The transition style of **PageTransitionEnter** whose **type** is **RouteType.Push** takes effect. The page slides in from the right of the screen.| The page exits. The transition style of **PageTransitionExit** whose **type** is **RouteType.Push** takes effect. The page slides out from the left of the screen.| 130| **router.back**, returning from page A back to page B | The page exits. The transition style of **PageTransitionExit** whose **type** is **RouteType.Pop** takes effect. The page slides out from the right of the screen.| The page enters. The transition style of **PageTransitionEnter** whose **type** is **RouteType.Pop** takes effect. The page slides in from the left of the screen.| 131 132 133>**NOTE** 134> 135> 1. The transition style of each page can be independently configured. However, as each transition involves two pages, take into account the smoothness between page transitions, for example, the transition duration. 136> 137> 2. If no page transition style is defined, a page uses the default page transition style. 138 139 140## Disabling Page Transition 141 142 143```ts 144pageTransition() { 145 PageTransitionEnter({ type: RouteType.None, duration: 0 }) 146 PageTransitionExit({ type: RouteType.None, duration: 0 }) 147} 148``` 149 150 151You can disable the transition animation of a page by setting the page transition duration to 0. 152 153 154## Example 155 156In the following example, page transition animations are defined using [router.pushUrl](../reference/apis-arkui/js-apis-router.md#routerpushurl9) for all the page transition scenarios. 157 158```ts 159// PageTransitionSrc1 160@Entry 161@Component 162struct PageTransitionSrc1 { 163 build() { 164 Column() { 165 Image($r('app.media.mountain')) 166 .width('90%') 167 .height('80%') 168 .objectFit(ImageFit.Fill) 169 .syncLoad(true) // Load the image synchronously so that the image has been loaded when the page is displayed. 170 .margin(30) 171 172 Row({ space: 10 }) { 173 Button("pushUrl") 174 .onClick(() => { 175 // Navigate to the next page, which is a push operation. 176 this.getUIContext().getRouter().pushUrl({ url: 'pages/myTest/pageTransitionDst1' }); 177 }) 178 Button("back") 179 .onClick(() => { 180 // Return to the previous page, which is equivalent to the pop operation. 181 this.getUIContext().getRouter().back(); 182 }) 183 }.justifyContent(FlexAlign.Center) 184 } 185 .width("100%").height("100%") 186 .alignItems(HorizontalAlign.Center) 187 } 188 189 pageTransition() { 190 // Configure the page entrance animation to sliding in from the right, with the duration of 1000 ms. The settings take effect only when the push operation is performed on the page stack. 191 PageTransitionEnter({ type: RouteType.Push, duration: 1000 }) 192 .slide(SlideEffect.Right) 193 // Configure the page entrance animation to sliding in from the left, with the duration of 1000 ms. The settings take effect only when the pop operation is performed on the page stack. 194 PageTransitionEnter({ type: RouteType.Pop, duration: 1000 }) 195 .slide(SlideEffect.Left) 196 // Configure the page exit animation to sliding out from the left, with the duration of 1000 ms. The settings take effect only when the push operation is performed on the page stack. 197 PageTransitionExit({ type: RouteType.Push, duration: 1000 }) 198 .slide(SlideEffect.Left) 199 // Configure the page exit animation to sliding out from the right, with the duration of 1000 ms. The settings take effect only when the pop operation is performed on the page stack. 200 PageTransitionExit({ type: RouteType.Pop, duration: 1000 }) 201 .slide(SlideEffect.Right) 202 } 203} 204``` 205 206 207 208 209```ts 210// PageTransitionDst1 211@Entry 212@Component 213struct PageTransitionDst1 { 214 build() { 215 Column() { 216 Image($r('app.media.forest')) 217 .width('90%') 218 .height('80%') 219 .objectFit(ImageFit.Fill) 220 .syncLoad(true) // Load the image synchronously so that the image has been loaded when the page is displayed. 221 .margin(30) 222 223 Row({ space: 10 }) { 224 Button("pushUrl") 225 .onClick(() => { 226 // Navigate to the next page, which is a push operation. 227 this.getUIContext().getRouter().pushUrl({ url: 'pages/myTest/pageTransitionSrc1' }); 228 }) 229 Button("back") 230 .onClick(() => { 231 // Return to the previous page, which is equivalent to the pop operation. 232 this.getUIContext().getRouter().back(); 233 }) 234 }.justifyContent(FlexAlign.Center) 235 } 236 .width("100%").height("100%") 237 .alignItems(HorizontalAlign.Center) 238 } 239 240 pageTransition() { 241 // Configure the page entrance animation to sliding in from the right, with the duration of 1000 ms. The settings take effect only when the push operation is performed on the page stack. 242 PageTransitionEnter({ type: RouteType.Push, duration: 1000 }) 243 .slide(SlideEffect.Right) 244 // Configure the page entrance animation to sliding in from the left, with the duration of 1000 ms. The settings take effect only when the pop operation is performed on the page stack. 245 PageTransitionEnter({ type: RouteType.Pop, duration: 1000 }) 246 .slide(SlideEffect.Left) 247 // Configure the page exit animation to sliding out from the left, with the duration of 1000 ms. The settings take effect only when the push operation is performed on the page stack. 248 PageTransitionExit({ type: RouteType.Push, duration: 1000 }) 249 .slide(SlideEffect.Left) 250 // Configure the page exit animation to sliding out from the right, with the duration of 1000 ms. The settings take effect only when the pop operation is performed on the page stack. 251 PageTransitionExit({ type: RouteType.Pop, duration: 1000 }) 252 .slide(SlideEffect.Right) 253 } 254} 255``` 256 257 258 259 260 261 262In the following example, **type** is set to **RouteType.None**. 263 264 265 266```ts 267// PageTransitionSrc2 268@Entry 269@Component 270struct PageTransitionSrc2 { 271 build() { 272 Column() { 273 Image($r('app.media.mountain')) 274 .width('90%') 275 .height('80%') 276 .objectFit(ImageFit.Fill) 277 .syncLoad(true) // Load the image synchronously so that the image has been loaded when the page is displayed. 278 .margin(30) 279 280 Row({ space: 10 }) { 281 Button("pushUrl") 282 .onClick(() => { 283 // Navigate to the next page, which is a push operation. 284 this.getUIContext().getRouter().pushUrl({ url: 'pages/myTest/pageTransitionDst2' }); 285 }) 286 Button("back") 287 .onClick(() => { 288 // Return to the previous page, which is equivalent to the pop operation. 289 this.getUIContext().getRouter().back(); 290 }) 291 }.justifyContent(FlexAlign.Center) 292 } 293 .width("100%").height("100%") 294 .alignItems(HorizontalAlign.Center) 295 } 296 297 pageTransition() { 298 // Configure the page entrance animation to sliding in from the left, with the duration of 1000 ms. The settings take effect no matter whether the push or pop operation is performed on the page stack. 299 PageTransitionEnter({ duration: 1000 }) 300 .slide(SlideEffect.Left) 301 // Configure the page exit animation to translating by 100 vp along the x- and y-axes and changing the opacity to 0, with the duration of 1200 ms. The settings take effect no matter whether the push or pop operation is performed on the page stack. 302 PageTransitionExit({ duration: 1200 }) 303 .translate({ x: 100.0, y: 100.0 }) 304 .opacity(0) 305 } 306} 307``` 308 309 310 311```ts 312// PageTransitionDst2 313@Entry 314@Component 315struct PageTransitionDst2 { 316 build() { 317 Column() { 318 Image($r('app.media.forest')) 319 .width('90%') 320 .height('80%') 321 .objectFit(ImageFit.Fill) 322 .syncLoad(true) // Load the image synchronously so that the image has been loaded when the page is displayed. 323 .margin(30) 324 325 Row({ space: 10 }) { 326 Button("pushUrl") 327 .onClick(() => { 328 // Navigate to the next page, which is a push operation. 329 this.getUIContext().getRouter().pushUrl({ url: 'pages/myTest/pageTransitionSrc2' }); 330 }) 331 Button("back") 332 .onClick(() => { 333 // Return to the previous page, which is equivalent to the pop operation. 334 this.getUIContext().getRouter().back(); 335 }) 336 }.justifyContent(FlexAlign.Center) 337 } 338 .width("100%").height("100%") 339 .alignItems(HorizontalAlign.Center) 340 } 341 342 pageTransition() { 343 // Configure the page entrance animation to sliding in from the left, with the duration of 1200 ms. The settings take effect no matter whether the push or pop operation is performed on the page stack. 344 PageTransitionEnter({ duration: 1200 }) 345 .slide(SlideEffect.Left) 346 // Configure the page exit animation to translating by 100 vp along the x- and y-axes and changing the opacity to 0, with the duration of 1000 ms. The settings take effect no matter whether the push or pop operation is performed on the page stack. 347 PageTransitionExit({ duration: 1000 }) 348 .translate({ x: 100.0, y: 100.0 }) 349 .opacity(0) 350 } 351} 352``` 353 354 355 356 357
