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