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 stack is in the multi-instance mode, that is, 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** – redirection from page A to new 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** – redirection 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** – redirection from page B to new 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** – redirection 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 stack is in the multi-instance mode, that is, 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** – redirection from page A to new 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** – redirection 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** – redirection from page B to new 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** – redirection 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 160import router from '@ohos.router'; 161@Entry 162@Component 163struct PageTransitionSrc1 { 164 build() { 165 Column() { 166 Image($r('app.media.mountain')) 167 .width('90%') 168 .height('80%') 169 .objectFit(ImageFit.Fill) 170 .syncLoad(true) // Load the image synchronously so that the image has been loaded when the page is displayed. 171 .margin(30) 172 173 Row({ space: 10 }) { 174 Button("pushUrl") 175 .onClick(() => { 176 // Navigate to the next page, which is a push operation. 177 router.pushUrl({ url: 'pages/myTest/pageTransitionDst1' }); 178 }) 179 Button("back") 180 .onClick(() => { 181 // Return to the previous page, which is equivalent to the pop operation. 182 router.back(); 183 }) 184 }.justifyContent(FlexAlign.Center) 185 } 186 .width("100%").height("100%") 187 .alignItems(HorizontalAlign.Center) 188 } 189 190 pageTransition() { 191 // 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. 192 PageTransitionEnter({ type: RouteType.Push, duration: 1000 }) 193 .slide(SlideEffect.Right) 194 // 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. 195 PageTransitionEnter({ type: RouteType.Pop, duration: 1000 }) 196 .slide(SlideEffect.Left) 197 // 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. 198 PageTransitionExit({ type: RouteType.Push, duration: 1000 }) 199 .slide(SlideEffect.Left) 200 // 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. 201 PageTransitionExit({ type: RouteType.Pop, duration: 1000 }) 202 .slide(SlideEffect.Right) 203 } 204} 205``` 206 207 208 209 210```ts 211// PageTransitionDst1 212import router from '@ohos.router'; 213@Entry 214@Component 215struct PageTransitionDst1 { 216 build() { 217 Column() { 218 Image($r('app.media.forest')) 219 .width('90%') 220 .height('80%') 221 .objectFit(ImageFit.Fill) 222 .syncLoad(true) // Load the image synchronously so that the image has been loaded when the page is displayed. 223 .margin(30) 224 225 Row({ space: 10 }) { 226 Button("pushUrl") 227 .onClick(() => { 228 // Navigate to the next page, which is a push operation. 229 router.pushUrl({ url: 'pages/myTest/pageTransitionSrc1' }); 230 }) 231 Button("back") 232 .onClick(() => { 233 // Return to the previous page, which is equivalent to the pop operation. 234 router.back(); 235 }) 236 }.justifyContent(FlexAlign.Center) 237 } 238 .width("100%").height("100%") 239 .alignItems(HorizontalAlign.Center) 240 } 241 242 pageTransition() { 243 // 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. 244 PageTransitionEnter({ type: RouteType.Push, duration: 1000 }) 245 .slide(SlideEffect.Right) 246 // 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. 247 PageTransitionEnter({ type: RouteType.Pop, duration: 1000 }) 248 .slide(SlideEffect.Left) 249 // 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. 250 PageTransitionExit({ type: RouteType.Push, duration: 1000 }) 251 .slide(SlideEffect.Left) 252 // 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. 253 PageTransitionExit({ type: RouteType.Pop, duration: 1000 }) 254 .slide(SlideEffect.Right) 255 } 256} 257``` 258 259 260 261 262 263 264In the following example, **type** is set to **RouteType.None**. 265 266 267 268```ts 269// PageTransitionSrc2 270import router from '@ohos.router'; 271@Entry 272@Component 273struct PageTransitionSrc2 { 274 build() { 275 Column() { 276 Image($r('app.media.mountain')) 277 .width('90%') 278 .height('80%') 279 .objectFit(ImageFit.Fill) 280 .syncLoad(true) // Load the image synchronously so that the image has been loaded when the page is displayed. 281 .margin(30) 282 283 Row({ space: 10 }) { 284 Button("pushUrl") 285 .onClick(() => { 286 // Navigate to the next page, which is a push operation. 287 router.pushUrl({ url: 'pages/myTest/pageTransitionDst2' }); 288 }) 289 Button("back") 290 .onClick(() => { 291 // Return to the previous page, which is equivalent to the pop operation. 292 router.back(); 293 }) 294 }.justifyContent(FlexAlign.Center) 295 } 296 .width("100%").height("100%") 297 .alignItems(HorizontalAlign.Center) 298 } 299 300 pageTransition() { 301 // 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. 302 PageTransitionEnter({ duration: 1000 }) 303 .slide(SlideEffect.Left) 304 // 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. 305 PageTransitionExit({ duration: 1200 }) 306 .translate({ x: 100.0, y: 100.0 }) 307 .opacity(0) 308 } 309} 310``` 311 312 313 314```ts 315// PageTransitionDst2 316import router from '@ohos.router'; 317@Entry 318@Component 319struct PageTransitionDst2 { 320 build() { 321 Column() { 322 Image($r('app.media.forest')) 323 .width('90%') 324 .height('80%') 325 .objectFit(ImageFit.Fill) 326 .syncLoad(true) // Load the image synchronously so that the image has been loaded when the page is displayed. 327 .margin(30) 328 329 Row({ space: 10 }) { 330 Button("pushUrl") 331 .onClick(() => { 332 // Navigate to the next page, which is a push operation. 333 router.pushUrl({ url: 'pages/myTest/pageTransitionSrc2' }); 334 }) 335 Button("back") 336 .onClick(() => { 337 // Return to the previous page, which is equivalent to the pop operation. 338 router.back(); 339 }) 340 }.justifyContent(FlexAlign.Center) 341 } 342 .width("100%").height("100%") 343 .alignItems(HorizontalAlign.Center) 344 } 345 346 pageTransition() { 347 // 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. 348 PageTransitionEnter({ duration: 1200 }) 349 .slide(SlideEffect.Left) 350 // 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. 351 PageTransitionExit({ duration: 1000 }) 352 .translate({ x: 100.0, y: 100.0 }) 353 .opacity(0) 354 } 355} 356``` 357 358 359 360 361
