1# Page Transition (pageTransition)
2
3You can customize the page entrance and exit animations in the **pageTransition** API for transition between pages. For details, see [Page Transition Animation](../../../ui/arkts-page-transition-animation.md).
4
5> **NOTE**
6>
7> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8>
9> To achieve a better transition effect, you are advised to use the [Navigation](../../../ui/arkts-navigation-navigation.md) component and [modal transition](../../../ui/arkts-modal-transition.md).
10
11## pageTransition
12
13pageTransition?(): void
14
15Defines the transition animation to play when the user accesses this page or is redirected from this page to another page.
16
17**Atomic service API**: This API can be used in atomic services since API version 11.
18
19**System capability**: SystemCapability.ArkUI.ArkUI.Full
20
21## PageTransitionEnter
22
23PageTransitionEnter(value: PageTransitionOptions)
24
25Page entrance animation.
26
27**Atomic service API**: This API can be used in atomic services since API version 11.
28
29**System capability**: SystemCapability.ArkUI.ArkUI.Full
30
31**Parameters**
32
33| Name| Type                                                  | Mandatory| Description                |
34| ------ | ------------------------------------------------------ | ---- | -------------------- |
35| value  | [PageTransitionOptions](#pagetransitionoptions) | Yes  | Page entrance animation.|
36
37## PageTransitionExit
38
39PageTransitionExit(value: PageTransitionOptions)
40
41Page exit animation.
42
43**Atomic service API**: This API can be used in atomic services since API version 11.
44
45**System capability**: SystemCapability.ArkUI.ArkUI.Full
46
47**Parameters**
48
49| Name| Type                                                   | Mandatory| Description                |
50| ------ | ------------------------------------------------------- | ---- | -------------------- |
51| value  | [PageTransitionOptions](#pagetransitionoptions) | Yes  | Page exit animation.|
52
53## PageTransitionOptions
54
55**Atomic service API**: This API can be used in atomic services since API version 11.
56
57| Name    | Type                                                        | Mandatory| Description                                                        |
58| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
59| type     | [RouteType](#routetype)                              | No  | Route type for the page transition effect to take effect.<br>Default value: **RouteType.None**   |
60| duration | number                                                       | No  | Animation duration.<br>Unit: ms<br>Default value: **1000**                |
61| curve    | [Curve](ts-appendix-enums.md#curve) \| string \| [ICurve](../js-apis-curve.md#icurve9)<sup>10+</sup> | No  | Animation curve. The value of the string type can be any of the following: "ease", "ease-in", "ease-out", "ease-in-out", "extreme-deceleration", "fast-out-linear-in", "fast-out-slow-in", "friction", "linear", "linear-out-slow-in", "rhythm", "sharp", "smooth".<br>Default value: **Curve.Linear**|
62| delay    | number                                                       | No  | Animation delay.<br>Unit: ms<br>Default value: **0**<br>**NOTE**<br>If no match is found, the default page transition effect is used (which may vary according to the device). To disable the default page transition effect, set **duration** to **0**.|
63
64
65## Attributes
66
67**Atomic service API**: This API can be used in atomic services since API version 11.
68
69| Name | Type                                                    | Mandatory| Description                                                    |
70| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
71| slide     | [SlideEffect](#slideeffect)                          | No  | Slide effect during page transition.|
72| translate | {<br>x? : number \| string;<br>y? : number \| string;<br>z? : number \| string<br>} | No  | Translation effect during page transition, which is the value of the start point of entrance and the end point of exit. When this parameter is set together with **slide**, the latter takes effect by default.<br>- **x**: translation distance along the x-axis.<br>- **y**: translation distance along the y-axis.<br>- **z**: translation distance along the y-axis.|
73| scale     | {<br>x? : number;<br>y? : number;<br>z? : number;<br>centerX? : number \| string;<br>centerY? : number \| string<br>} | No  | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit.<br>- **x**: scale ratio along the x-axis.<br>- **y**: scale ratio along the y-axis.<br>- **z**: scale ratio along the z-axis.<br>- **centerX** and **centerY**: scale center point. The default values are both **"50%"**, indicating that the center point of the page.<br>- If the center point is (0, 0), it refers to the upper left corner of the component.<br>|
74| opacity   | number                                                       | No  | Opacity, which is the opacity value of the start point of entrance or the end point of exit.|
75
76
77## Events
78### onEnter
79
80onEnter(event: (type: RouteType, progress: number) => void): PageTransitionEnterInterface
81
82Invoked on a per-frame basis until the entrance animation is complete, with the **progress** parameter changing from 0 to 1.
83
84**Atomic service API**: This API can be used in atomic services since API version 11.
85
86**System capability**: SystemCapability.ArkUI.ArkUI.Full
87
88**Parameters**
89
90| Name| Type                                                              | Mandatory| Description                                               |
91| ------ | ----------------------------------------------------------------- | ---- | ------------------------------------------------    |
92| event  | (type: [RouteType](#routetype), progress: number) => void | Yes  | Callback invoked on a per-frame basis until the entrance animation is complete, with the **progress** parameter changing from 0 to 1.|
93
94**Example**
95
96```js
97  pageTransition() {
98    PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
99      // During the transition animation, the entrance animation has a type that represents the route type, and a progress that increases from 0 to 1.
100      .onEnter((type: RouteType, progress: number) => {
101        // Service logic
102      })
103  }
104```
105
106### onExit
107
108onExit(event: (type: RouteType, progress: number) => void): PageTransitionExitInterface
109
110Invoked on a per-frame basis until the exit animation is complete, with the **progress** parameter changing from 0 to 1.
111
112**System capability**: SystemCapability.ArkUI.ArkUI.Full
113
114**Atomic service API**: This API can be used in atomic services since API version 11.
115
116**Parameters**
117
118| Name| Type                                                              | Mandatory| Description                                               |
119| ------ | ----------------------------------------------------------------- | ---- | ------------------------------------------------    |
120| event  | (type: [RouteType](#routetype), progress: number) => void | Yes  | Callback invoked on a per-frame basis until the exit animation is complete, with the **progress** parameter changing from 0 to 1.|
121
122**Example**
123
124```js
125  pageTransition() {
126    PageTransitionExit({ duration: 1200, curve: Curve.Linear })
127      // During the transition animation, the exit animation has a type that represents the route type, and a progress that increases from 0 to 1.
128      .onExit((type: RouteType, progress: number) => {
129        // Service logic
130      })
131  }
132```
133
134 ## RouteType
135
136**System capability**: SystemCapability.ArkUI.ArkUI.Full
137
138**Atomic service API**: This API can be used in atomic services since API version 11.
139
140
141| Name| Description                                                        |
142| ---- | ------------------------------------------------------------ |
143| Pop  | Redirects to a specified page. To redirect the user from page B back to page A, set **RouteType** of **PageTransitionExit** to **None** or **Pop** for page B and set **RouteType** of **PageTransitionEnter** to **None** or **Pop** for page A.|
144| Push | Redirects to the next page. To redirect the user from page A to page B, set **RouteType** of **PageTransitionExit** to **None** or **Push** for page A and set **RouteType** of **PageTransitionEnter** to **None** or **Push** for page B.|
145| None | The page is not redirected. The animation specified by **PageTransitionEnter** takes effect for page entrance, and the animation specified by **PageTransitionExit** takes effect for page exit.|
146
147## SlideEffect
148
149| Name               | Description                                                        |
150| ------------------- | ------------------------------------------------------------ |
151| Left                | When set to Enter, slides in from the left. When set to Exit, slides out to the left.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
152| Right               | When set to Enter, slides in from the right. When set to Exit, slides out to the right.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
153| Top                 | When set to Enter, slides in from the top. When set to Exit, slides out to the top.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
154| Bottom              | When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
155| START<sup>12+</sup> | Left-to-right scripts: When set to Enter, slides in from the left; when set to Exit, slides out to the left. Right-to-left scripts: When set to Enter, slides in from the right; when set to Exit, slides out to the right.<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
156| END<sup>12+</sup>   | Left-to-right scripts: When set to Enter, slides in from the right; when set to Exit, slides out to the right. Right-to-left scripts: When set to Enter, slides in from the left; when set to Exit, slides out to the left.<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
157
158## Example
159
160### Example 1
161
162Example 1: Apply different exit and entry animations based on different exit and entry types.
163
164```ts
165// index.ets
166import { router } from '@kit.ArkUI';
167
168@Entry
169@Component
170struct Index {
171  @State scale1: number = 1
172  @State opacity1: number = 1
173
174  build() {
175    Column() {
176      Image($r("app.media.transition_image1")).width('100%').height('100%')
177    }
178    .width('100%')
179    .height('100%')
180    .scale({ x: this.scale1 })
181    .opacity(this.opacity1)
182    .onClick(() => {
183      router.pushUrl({ url: 'pages/Page1' })
184    })
185  }
186
187  pageTransition() {
188    PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
189      .onEnter((type: RouteType, progress: number) => {
190        if (type == RouteType.Push||type == RouteType.Pop) {
191          this.scale1 = progress
192          this.opacity1 = progress
193        }
194      })
195    PageTransitionExit({ duration: 1200, curve: Curve.Ease })
196      .onExit((type: RouteType, progress: number) => {
197        if (type == RouteType.Push) {
198          this.scale1 = 1 - progress
199          this.opacity1 = 1 - progress
200        }
201      })
202  }
203}
204```
205
206```ts
207// page1.ets
208import { router } from '@kit.ArkUI';
209
210@Entry
211@Component
212struct Page1 {
213  @State scale2: number = 1
214  @State opacity2: number = 1
215
216  build() {
217    Column() {
218      Image($r("app.media.transition_image2")).width('100%').height('100%') // Store the image in the media folder.
219    }
220    .width('100%')
221    .height('100%')
222    .scale({ x: this.scale2 })
223    .opacity(this.opacity2)
224    .onClick(() => {
225      router.pushUrl({ url: 'pages/Index' })
226    })
227  }
228
229  pageTransition() {
230    PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
231      .onEnter((type: RouteType, progress: number) => {
232        if(type==RouteType.Push || type == RouteType.Pop)
233          this.scale2 = progress
234        this.opacity2 = progress
235
236      })
237    PageTransitionExit({ duration: 1200, curve: Curve.Ease })
238      .onExit((type: RouteType, progress: number) => {
239        if (type == RouteType.Pop) {
240          this.scale2 = 1 - progress
241          this.opacity2 = 1 - progress
242        }
243      })
244  }
245}
246```
247
248![pageTransition1](figures/pageTransition1.gif)
249
250Example 2: Apply the entrance animation of sliding in from the left and the exit animation of translating with opacity change.
251
252```ts
253// index.ets
254@Entry
255@Component
256struct PageTransitionExample {
257  build() {
258    Column() {
259      Navigator({ target: 'pages/page1', type: NavigationType.Push }) {
260        Image($r('app.media.bg1')).width('100%').height('100%')   // Store the image in the media folder.
261      }
262    }
263  }
264
265  // Use the default effects provided by the system, such as translation, scaling, and opacity.
266  pageTransition() {
267    // Set the duration of the entrance animation to 1200 ms, in the purpose of matching the duration of the exit animation of the other page.
268    PageTransitionEnter({ duration: 1200 })
269      .slide(SlideEffect.Left)
270    // Set the duration of the exit animation to 1000 ms, in the purpose of matching the duration of the entrance animation of the other page.
271    PageTransitionExit({ duration: 1000 })
272      .translate({ x: 100.0, y: 100.0 })
273      .opacity(0)
274  }
275}
276```
277
278```ts
279// page1.ets
280@Entry
281@Component
282struct PageTransitionExample1 {
283  build() {
284    Column() {
285      Navigator({ target: 'pages/index', type: NavigationType.Push }) {
286        Image($r('app.media.bg2')).width('100%').height('100%')    // Store the image in the media folder.
287      }
288    }
289  }
290
291  // Use the default effects provided by the system, such as translation, scaling, and opacity.
292  pageTransition() {
293    // Set the duration of the entrance animation to 1000 ms, in the purpose of matching the duration of the exit animation of the other page.
294    PageTransitionEnter({ duration: 1000 })
295      .slide(SlideEffect.Left)
296    // Set the duration of the exit animation to 1200 ms, in the purpose of matching the duration of the entrance animation of the other page.
297    PageTransitionExit({ duration: 1200 })
298      .translate({ x: 100.0, y: 100.0 })
299      .opacity(0)
300  }
301}
302```
303
304![pageTransition2](figures/pageTransition2.gif)
305
306### Example 2
307
308Customization method 1: Configure the various entrance and exit translation effects provided, with the system language layout mode set to right-to-left (RTL).
309
310```ts
311// index.ets
312import { router } from '@kit.ArkUI'
313
314@Entry
315@Component
316struct PageTransitionExample {
317  @State scale1: number = 1
318  @State opacity1: number = 1
319
320  build() {
321    Column() {
322      Button("Page 1").onClick(()=>{
323        router.pushUrl({
324          url:"pages/page1"
325        })
326      })
327        .width(200)
328        .height(60)
329        .fontSize(36)
330      Text("START")
331        .fontSize(36)
332        .textAlign(TextAlign.Center)
333    }.scale({ x: this.scale1 }).opacity(this.opacity1).height("100%").width("100%").justifyContent(FlexAlign.Center)
334  }
335
336  // Use the default effects provided by the system, such as translation, scaling, and opacity.
337  pageTransition() {
338    // Set the entrance animation.
339    PageTransitionEnter({ duration: 200 })
340      .slide(SlideEffect.START)
341    // Set the exit animation.
342    PageTransitionExit({ delay: 100 })
343      .slide(SlideEffect.START) //Left
344  }
345}
346```
347
348```ts
349// page1.ets
350import { router } from '@kit.ArkUI'
351
352@Entry
353@Component
354struct PageTransitionExample {
355  @State scale1: number = 1
356  @State opacity1: number = 1
357
358  build() {
359    Column() {
360      Button("Page 2").onClick(()=>{
361        router.pushUrl({
362          url:"pages/Index"
363        })
364      })
365        .width(200)
366        .height(60)
367        .fontSize(36)
368      Text("END")
369        .fontSize(36)
370        .textAlign(TextAlign.Center)
371    }.scale({ x: this.scale1 }).opacity(this.opacity1).height("100%").width("100%").justifyContent(FlexAlign.Center)
372  }
373
374  // Use the default effects provided by the system, such as translation, scaling, and opacity.
375  pageTransition() {
376    PageTransitionEnter({ duration: 200 })
377      .slide(SlideEffect.END) //Right
378    PageTransitionExit({ delay:100 })
379      .slide(SlideEffect.END) //Right
380  }
381}
382
383```
384
385![pageTransition1](figures/pageRTL.gif)
386
387Customization method 2: Use the system's default entrance and exit effects, with the system language layout mode set to right-to-left (RTL).
388
389```ts
390// index.ets
391import { router } from '@kit.ArkUI'
392
393@Entry
394@Component
395struct PageTransitionExample {
396  @State scale1: number = 1
397  @State opacity1: number = 1
398
399  build() {
400    Column() {
401      Button("Page 1").onClick(()=>{
402        router.pushUrl({
403          url:"pages/page1"
404        })
405      })
406        .width(200)
407        .height(60)
408        .fontSize(36)
409    }.scale({ x: this.scale1 }).opacity(this.opacity1).height("100%").width("100%").justifyContent(FlexAlign.Center)
410  }
411}
412```
413
414```ts
415// page1.ets
416import { router } from '@kit.ArkUI'
417
418@Entry
419@Component
420struct PageTransitionExample {
421  @State scale1: number = 1
422  @State opacity1: number = 1
423
424  build() {
425    Column() {
426      Button("Page 2").onClick(()=>{
427        router.pushUrl({
428          url:"pages/Index"
429        })
430      })
431        .width(200)
432        .height(60)
433        .fontSize(36)
434    }.scale({ x: this.scale1 }).opacity(this.opacity1).height("100%").width("100%").justifyContent(FlexAlign.Center)
435  }
436}
437```
438
439![pageTransition1](figures/pageRTL2.gif)
440