1# Page Transition Animation 2 3 4During page redirection, one page disappears and the other page appears. In this case, you can configure the page transition parameters of each page to customize the page transition effect. [Page transition](../reference/arkui-ts/ts-page-transition-animation.md) effect is written in the **pageTransition** API. PageTransitionEnter and PageTransitionExit are used to specify the animation effect of page entry and exit. 5 6 7PageTransitionEnter's interface is: 8 9 10 11```ts 12PageTransitionEnter({type?: RouteType,duration?: number,curve?: Curve | string,delay?: number}) 13``` 14 15 16The interface of PageTransitionExit is: 17 18 19 20```ts 21PageTransitionExit({type?: RouteType,duration?: number,curve?: Curve | string,delay?: number}) 22``` 23 24 25Defines the PageTransitionEnter and PageTransitionExit components. The slide, translate, scale, and opacity attributes can be used to define different page transition effects. For PageTransitionEnter, these effects indicate the start value during entry. For PageTransitionExit, these effects indicate the end value during exit. This method is similar to that for configuring component transition. In addition, PageTransitionEnter provides the onEnter interface to call back the entry animation of a customized page, and PageTransitionExit provides the onExit interface to call back the exit animation of a customized page. 26 27 28The type parameter in the preceding interface indicates the type of the route that takes effect, which may be confused by developers. One of the two pages must exit and the other must enter. If you switch from page A to page B through the router.pushUrl operation, page A exits and the exit animation is displayed. Page B enters and the entry animation is displayed. If the router.back operation is performed to return from page B to page A, page B exits and the exit animation is displayed. Page A enters and the entry animation is displayed. That is, PageTransitionEnter of a page may be an entry animation of a new page caused by a new page (push, stack), or an entry animation of an old page in a page stack caused by a page return (back, pop, stack). To distinguish the two types of entry animations, the type parameter is provided so that developers can define all types of page transition effects. 29 30 31## Set type to RouteType.None. 32 33If the value of type is RouteType.None, the push and pop operations on the page stack are valid. The default value of type is RouteType.None. 34 35 36```ts 37// page A 38pageTransition() { 39 // Define the effect when the page is displayed. The page slides in from the left for 1200 ms. The effect takes 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 // Define the effect when the page exits. The page slides out to the left for 1000 ms. The effect takes 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 // Define the effect when the page is displayed. The page slides in from the right for 1000 ms. The effect takes 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 // Define the effect when the page exits. The page slides out to the right for 1200 ms. The effect takes 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 standard 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 operations | Transition effect of page A | Transition effect of page B | 67| ---------------------------- | ---------------------------------- | ---------------------------------- | 68| router.pushUrl. The new page B is displayed from page A.| Exit the page. The PageTransitionExit takes effect and slides to the left to display the screen. | The page is displayed. PageTransitionEnter takes effect and slides from the right to the screen.| 69| router.back: Return from page B to page A. | The page is displayed, PageTransitionEnter takes effect, and you can slide from the left to the screen.| Exit the page. The PageTransitionExit takes effect and slides out of the screen to the right. | 70| router.pushUrl. The new page A is displayed from page B.| The page is displayed, PageTransitionEnter takes effect, and you can slide from the left to the screen.| Exit the page. The PageTransitionExit takes effect and slides out of the screen to the right. | 71| router.back: Return from page A to page B. | Exit the page. The PageTransitionExit takes effect and slides to the left to display the screen. | The page is displayed. PageTransitionEnter takes effect and slides from the right to the screen.| 72 73 74If you want the page accessed by pushUrl to always slide in from the right and the page exited by 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 the transition effects of the four pages. 75 76 77## Set type to RouteType.Push or RouteType.Pop. 78 79If type is set to RouteType.Push, this parameter is valid only for the push operation of the page stack. If type is set to RouteType.Pop, this parameter is valid only for the pop operation of the page stack. 80 81 82```ts 83// page A 84pageTransition() { 85 // Define the effect when the page is entered. The page slides in from the right for 1200 ms. The effect takes effect only when the push operation is performed on the page stack. 86 PageTransitionEnter({ type: RouteType.Push, duration: 1200 }) 87 .slide(SlideEffect.Right) 88 // Define the effect when the page is entered. The page slides in from the left for 1200 ms. The effect takes effect only when the pop operation is performed on the page stack. 89 PageTransitionEnter({ type: RouteType.Pop, duration: 1200 }) 90 .slide(SlideEffect.Left) 91 // Define the effect when the page exits. The page slides out to the left for 1000 ms. The effect takes effect only when the push operation is performed on the page stack. 92 PageTransitionExit({ type: RouteType.Push, duration: 1000 }) 93 .slide(SlideEffect.Left) 94 // Define the effect when the page exits. The page slides out to the right for 1000 ms. The effect takes 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 // Define the effect when the page is entered. The page slides in from the right for 1000 ms. The effect takes effect only when the push operation is performed on the page stack. 106 PageTransitionEnter({ type: RouteType.Push, duration: 1000 }) 107 .slide(SlideEffect.Right) 108 //Define the effect when the page is entered. The page slides in from the left for 1000 ms. The effect takes effect only when the pop operation is performed on the page stack. 109 PageTransitionEnter({ type: RouteType.Pop, duration: 1000 }) 110 .slide(SlideEffect.Left) 111 // Define the effect when the page exits. The page slides out to the left for 1200 ms. The effect takes effect only when the push operation is performed on the page stack. 112 PageTransitionExit({ type: RouteType.Push, duration: 1200 }) 113 .slide(SlideEffect.Left) 114 // Define the effect when the page exits. The page slides out to the right for 1200 ms. The effect takes 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 completely defines all possible page transition styles. Assume that the page stack is in the standard 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 operations | Transition effect of page A | Transition effect of page B | 125| ---------------------------- | ---------------------------------------- | ---------------------------------------- | 126| router.pushUrl. The new page B is displayed from page A.| The page exits. The transition style of PageTransitionExit whose type is RouteType.Push takes effect. The screen slides out to the left.| The page is displayed. The transition style of PageTransitionEnter whose type is RouteType.Push takes effect. The page slides from the right to the screen.| 127| router.back: Return from page B to page A. | The page is displayed. The transition style of PageTransitionEnter whose type is RouteType.Pop takes effect. Slide from the left to the screen.| The page exits. The transition style of PageTransitionExit whose type is RouteType.Pop takes effect. The screen slides out to the right.| 128| router.pushUrl. The new page A is displayed from page B.| The page is displayed. The transition style of PageTransitionEnter whose type is RouteType.Push takes effect. The page slides from the right to the screen.| The page exits. The transition style of PageTransitionExit whose type is RouteType.Push takes effect. The screen slides out to the left.| 129| router.back: Return from page A to page B. | The page exits. The transition style of PageTransitionExit whose type is RouteType.Pop takes effect. The screen slides out to the right.| The page is displayed. The transition style of PageTransitionEnter whose type is RouteType.Pop takes effect. Slide from the left to the screen.| 130 131 132>**NOTE** 133> 134> 1. The transition style of each page can be independently configured by developers. However, the transition involves two pages. Developers need to consider the transition effect of the two pages, for example, the transition duration. 135> 136> 2. If no matching page transition style is defined, the page uses the default page transition style. 137 138 139## Disable the transition of a page. 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 set the page transition duration to 0 so that no page transition animation is displayed on the page. 151 152 153## Example Scenario 154 155The following describes an example of a page transition animation that defines all four page transition styles. 156 157 158 159```ts 160// page A 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 //Route to the next page and perform the 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 //Define the effect when the page is entered. The page slides in from the right for 1000 ms. The effect takes effect only when the push operation is performed on the page stack. 193 PageTransitionEnter({ type: RouteType.Push, duration: 1000 }) 194 .slide(SlideEffect.Right) 195 //Define the effect when the page is entered. The page slides in from the left for 1000 ms. The effect takes effect only when the pop operation is performed on the page stack. 196 PageTransitionEnter({ type: RouteType.Pop, duration: 1000 }) 197 .slide(SlideEffect.Left) 198 //Define the effect when the page exits. The page slides out to the left for 1000 ms. The effect takes effect only when the push operation is performed on the page stack. 199 PageTransitionExit({ type: RouteType.Push, duration: 1000 }) 200 .slide(SlideEffect.Left) 201 //Define the effect when the page exits. The page slides out to the right for 1000 ms. The effect takes 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// page B 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 //Route to the next page and perform the 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 //Define the effect when the page is entered. The page slides in from the right for 1000 ms. The effect takes effect only when the push operation is performed on the page stack. 245 PageTransitionEnter({ type: RouteType.Push, duration: 1000 }) 246 .slide(SlideEffect.Right) 247 //Define the effect when the page is entered. The page slides in from the left for 1000 ms. The effect takes effect only when the pop operation is performed on the page stack. 248 PageTransitionEnter({ type: RouteType.Pop, duration: 1000 }) 249 .slide(SlideEffect.Left) 250 //Define the effect when the page exits. The page slides out to the left for 1000 ms. The effect takes effect only when the push operation is performed on the page stack. 251 PageTransitionExit({ type: RouteType.Push, duration: 1000 }) 252 .slide(SlideEffect.Left) 253 //Define the effect when the page exits. The page slides out to the right for 1000 ms. The effect takes 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 265The following describes an example of the page transition animation whose type is None. 266 267 268 269```ts 270// page A 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 //Route to the next page and perform the 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 //Define the effect when the page is displayed. The page slides in from the left for 1000 ms. The effect takes effect no matter whether the push or pop operation is performed on the page stack. 303 PageTransitionEnter({ duration: 1000 }) 304 .slide(SlideEffect.Left) 305 //Define the effect when the page exits. Compared with the normal page position, the page position is shifted by 100 vp in the x direction and 100 vp in the y direction. The transparency changes to 0. The duration is 1200 ms. The effect takes effect regardless of 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// page B 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 //Route to the next page and perform the 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 //Define the effect when the page is displayed. The page slides in from the left for 1200 ms. The effect takes effect no matter whether the push or pop operation is performed on the page stack. 349 PageTransitionEnter({ duration: 1200 }) 350 .slide(SlideEffect.Left) 351 //Define the effect when the page exits. Compared with the normal page position, the page position is shifted by 100 vp in the x direction and 100 vp in the y direction. The transparency changes to 0. The duration is 1000 ms. The effect takes effect regardless of 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
