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 5 6During page redirection, one page disappears and the other page appears. You can customize the [page transition effects](../reference/arkui-ts/ts-page-transition-animation.md) for these pages through the **pageTransition** API. Specifically, **PageTransitionEnter** defines the page entrance animation, while **PageTransitionExit** defines the page exit animation. 7 8 9API of **PageTransitionEnter**: 10 11 12 13```ts 14PageTransitionEnter({type?: RouteType,duration?: number,curve?: Curve | string,delay?: number}) 15``` 16 17 18API of **PageTransitionExit**: 19 20 21 22```ts 23PageTransitionExit({type?: RouteType,duration?: number,curve?: Curve | string,delay?: number}) 24``` 25 26 27Both **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. 28 29 30In 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. 31 32 33## Setting type to RouteType.None 34 35When **type** is set to **RouteType.None** (default value), the page transition animations work for both the push and pop operations in the page stack. 36 37 38```ts 39// page A 40pageTransition() { 41 // 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. 42 PageTransitionEnter({ type: RouteType.None, duration: 1200 }) 43 .slide(SlideEffect.Left) 44 // 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. 45 PageTransitionExit({ type: RouteType.None, duration: 1000 }) 46 .slide(SlideEffect.Left) 47} 48``` 49 50 51 52```ts 53// page B 54pageTransition() { 55 // 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. 56 PageTransitionEnter({ type: RouteType.None, duration: 1000 }) 57 .slide(SlideEffect.Right) 58 // 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. 59 PageTransitionExit({ type: RouteType.None, duration: 1200 }) 60 .slide(SlideEffect.Right) 61} 62``` 63 64 65Assume 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. 66 67 68| Route Operation | Page A Transition Effect | Page B Transition Effect | 69| ---------------------------- | ---------------------------------- | ---------------------------------- | 70| **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.| 71| **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. | 72| **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. | 73| **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.| 74 75 76If 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. 77 78 79## Setting type to RouteType.Push or RouteType.Pop 80 81When **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. 82 83 84```ts 85// page A 86pageTransition() { 87 // 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. 88 PageTransitionEnter({ type: RouteType.Push, duration: 1200 }) 89 .slide(SlideEffect.Right) 90 // 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. 91 PageTransitionEnter({ type: RouteType.Pop, duration: 1200 }) 92 .slide(SlideEffect.Left) 93 // 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. 94 PageTransitionExit({ type: RouteType.Push, duration: 1000 }) 95 .slide(SlideEffect.Left) 96 // 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. 97 PageTransitionExit({ type: RouteType.Pop, duration: 1000 }) 98 .slide(SlideEffect.Right) 99} 100``` 101 102 103 104```ts 105// page B 106pageTransition() { 107 // 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. 108 PageTransitionEnter({ type: RouteType.Push, duration: 1000 }) 109 .slide(SlideEffect.Right) 110 // 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. 111 PageTransitionEnter({ type: RouteType.Pop, duration: 1000 }) 112 .slide(SlideEffect.Left) 113 // 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. 114 PageTransitionExit({ type: RouteType.Push, duration: 1200 }) 115 .slide(SlideEffect.Left) 116 // 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. 117 PageTransitionExit({ type: RouteType.Pop, duration: 1200 }) 118 .slide(SlideEffect.Right) 119} 120``` 121 122 123The 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. 124 125 126| Route Operation | Page A Transition Effect | Page B Transition Effect | 127| ---------------------------- | ---------------------------------------- | ---------------------------------------- | 128| **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.| 129| **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.| 130| **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.| 131| **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.| 132 133 134>**NOTE** 135> 136> 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. 137> 138> 2. If no page transition style is defined, a page uses the default page transition style. 139 140 141## Disabling Page Transition 142 143 144```ts 145pageTransition() { 146 PageTransitionEnter({ type: RouteType.None, duration: 0 }) 147 PageTransitionExit({ type: RouteType.None, duration: 0 }) 148} 149``` 150 151 152You can disable the transition animation of a page by setting the page transition duration to 0. 153 154 155## Example 156 157In the following example, page transition animations are defined for all four page transition scenarios. 158 159 160 161```ts 162// PageTransitionSrc1 163import router from '@ohos.router'; 164@Entry 165@Component 166struct PageTransitionSrc1 { 167 build() { 168 Column() { 169 Image($r('app.media.mountain')) 170 .width('90%') 171 .height('80%') 172 .objectFit(ImageFit.Fill) 173 .syncLoad(true) // Load the image synchronously so that the image has been loaded when the page is displayed. 174 .margin(30) 175 176 Row({ space: 10 }) { 177 Button("pushUrl") 178 .onClick(() => { 179 // Navigate to the next page, which is a push operation. 180 router.pushUrl({ url: 'pages/myTest/pageTransitionDst1' }); 181 }) 182 Button("back") 183 .onClick(() => { 184 // Return to the previous page, which is equivalent to the pop operation. 185 router.back(); 186 }) 187 }.justifyContent(FlexAlign.Center) 188 } 189 .width("100%").height("100%") 190 .alignItems(HorizontalAlign.Center) 191 } 192 193 pageTransition() { 194 // 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. 195 PageTransitionEnter({ type: RouteType.Push, duration: 1000 }) 196 .slide(SlideEffect.Right) 197 // 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. 198 PageTransitionEnter({ type: RouteType.Pop, duration: 1000 }) 199 .slide(SlideEffect.Left) 200 // 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. 201 PageTransitionExit({ type: RouteType.Push, duration: 1000 }) 202 .slide(SlideEffect.Left) 203 // 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. 204 PageTransitionExit({ type: RouteType.Pop, duration: 1000 }) 205 .slide(SlideEffect.Right) 206 } 207} 208``` 209 210 211 212 213```ts 214// PageTransitionDst1 215import router from '@ohos.router'; 216@Entry 217@Component 218struct PageTransitionDst1 { 219 build() { 220 Column() { 221 Image($r('app.media.forest')) 222 .width('90%') 223 .height('80%') 224 .objectFit(ImageFit.Fill) 225 .syncLoad(true) // Load the image synchronously so that the image has been loaded when the page is displayed. 226 .margin(30) 227 228 Row({ space: 10 }) { 229 Button("pushUrl") 230 .onClick(() => { 231 // Navigate to the next page, which is a push operation. 232 router.pushUrl({ url: 'pages/myTest/pageTransitionSrc1' }); 233 }) 234 Button("back") 235 .onClick(() => { 236 // Return to the previous page, which is equivalent to the pop operation. 237 router.back(); 238 }) 239 }.justifyContent(FlexAlign.Center) 240 } 241 .width("100%").height("100%") 242 .alignItems(HorizontalAlign.Center) 243 } 244 245 pageTransition() { 246 // 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. 247 PageTransitionEnter({ type: RouteType.Push, duration: 1000 }) 248 .slide(SlideEffect.Right) 249 // 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. 250 PageTransitionEnter({ type: RouteType.Pop, duration: 1000 }) 251 .slide(SlideEffect.Left) 252 // 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. 253 PageTransitionExit({ type: RouteType.Push, duration: 1000 }) 254 .slide(SlideEffect.Left) 255 // 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. 256 PageTransitionExit({ type: RouteType.Pop, duration: 1000 }) 257 .slide(SlideEffect.Right) 258 } 259} 260``` 261 262 263 264 265 266 267In the following example, **type** is set to **RouteType.None**. 268 269 270 271```ts 272// PageTransitionSrc2 273import router from '@ohos.router'; 274@Entry 275@Component 276struct PageTransitionSrc2 { 277 build() { 278 Column() { 279 Image($r('app.media.mountain')) 280 .width('90%') 281 .height('80%') 282 .objectFit(ImageFit.Fill) 283 .syncLoad(true) // Load the image synchronously so that the image has been loaded when the page is displayed. 284 .margin(30) 285 286 Row({ space: 10 }) { 287 Button("pushUrl") 288 .onClick(() => { 289 // Navigate to the next page, which is a push operation. 290 router.pushUrl({ url: 'pages/myTest/pageTransitionDst2' }); 291 }) 292 Button("back") 293 .onClick(() => { 294 // Return to the previous page, which is equivalent to the pop operation. 295 router.back(); 296 }) 297 }.justifyContent(FlexAlign.Center) 298 } 299 .width("100%").height("100%") 300 .alignItems(HorizontalAlign.Center) 301 } 302 303 pageTransition() { 304 // 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. 305 PageTransitionEnter({ duration: 1000 }) 306 .slide(SlideEffect.Left) 307 // 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. 308 PageTransitionExit({ duration: 1200 }) 309 .translate({ x: 100.0, y: 100.0 }) 310 .opacity(0) 311 } 312} 313``` 314 315 316 317```ts 318// PageTransitionDst2 319import router from '@ohos.router'; 320@Entry 321@Component 322struct PageTransitionDst2 { 323 build() { 324 Column() { 325 Image($r('app.media.forest')) 326 .width('90%') 327 .height('80%') 328 .objectFit(ImageFit.Fill) 329 .syncLoad(true) // Load the image synchronously so that the image has been loaded when the page is displayed. 330 .margin(30) 331 332 Row({ space: 10 }) { 333 Button("pushUrl") 334 .onClick(() => { 335 // Navigate to the next page, which is a push operation. 336 router.pushUrl({ url: 'pages/myTest/pageTransitionSrc2' }); 337 }) 338 Button("back") 339 .onClick(() => { 340 // Return to the previous page, which is equivalent to the pop operation. 341 router.back(); 342 }) 343 }.justifyContent(FlexAlign.Center) 344 } 345 .width("100%").height("100%") 346 .alignItems(HorizontalAlign.Center) 347 } 348 349 pageTransition() { 350 // 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. 351 PageTransitionEnter({ duration: 1200 }) 352 .slide(SlideEffect.Left) 353 // 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. 354 PageTransitionExit({ duration: 1000 }) 355 .translate({ x: 100.0, y: 100.0 }) 356 .opacity(0) 357 } 358} 359``` 360 361 362 363 364
