• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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**System capability**: SystemCapability.ArkUI.ArkUI.Full
18
19## PageTransitionEnter
20
21PageTransitionEnter(value: PageTransitionOptions)
22
23Page entrance animation.
24
25**System capability**: SystemCapability.ArkUI.ArkUI.Full
26
27**Parameters**
28
29| Name| Type                                                  | Mandatory| Description                |
30| ------ | ------------------------------------------------------ | ---- | -------------------- |
31| value  | [PageTransitionOptions](#pagetransitionoptions) | Yes  | Page entrance animation.|
32
33## PageTransitionExit
34
35PageTransitionExit(value: PageTransitionOptions)
36
37Page exit animation.
38
39**System capability**: SystemCapability.ArkUI.ArkUI.Full
40
41**Parameters**
42
43| Name| Type                                                   | Mandatory| Description                |
44| ------ | ------------------------------------------------------- | ---- | -------------------- |
45| value  | [PageTransitionOptions](#pagetransitionoptions) | Yes  | Page exit animation.|
46
47## PageTransitionOptions
48
49
50| Name    | Type                                                        | Mandatory| Description                                                        |
51| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
52| type     | [RouteType](#routetype)                              | No  | Route type for the page transition effect to take effect.<br>Default value: **RouteType.None**   |
53| duration | number                                                       | No  | Animation duration.<br>Unit: ms<br>Default value: **1000**                |
54| curve    | [Curve](ts-appendix-enums.md#curve) \| string \| [ICurve](../apis/js-apis-curve.md#icurve)<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**|
55| 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**.|
56
57
58## Attributes
59
60| Name | Type                                                    | Mandatory| Description                                                    |
61| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
62| slide     | [SlideEffect](#slideeffect)                          | No  | Slide effect during page transition.|
63| 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.|
64| 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>|
65| opacity   | number                                                       | No  | Opacity, which is the opacity value of the start point of entrance or the end point of exit.|
66
67
68## Events
69
70| Name                                                        | Description                                                    |
71| ------------------------------------------------------------ | ------------------------------------------------------------ |
72| onEnter(event: (type: [RouteType](#routetype), progress: number) =&gt; void) | Invoked once every animation frame until the entrance animation ends, when the value of **progress** changes from 0 to 1. The input parameter is the normalized progress of the current entrance animation. The value range is 0–1.<br>- **type**: route type.<br>- **progress**: current progress.<br> <br> |
73| onExit(event: (type: [RouteType](#routetype), progress: number) =&gt; void) | Invoked once every animation frame until the exit animation ends, when the value of **progress** changes from 0 to 1. The input parameter is the normalized progress of the current exit animation. The value range is 0–1.<br>- **type**: route type.<br>- **progress**: current progress.<br> <br> |
74
75## RouteType
76
77| Name| Description                                                        |
78| ---- | ------------------------------------------------------------ |
79| 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.|
80| 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.|
81| 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.|
82
83## SlideEffect
84
85| Name  | Description                                              |
86| ------ | -------------------------------------------------- |
87| Left   | When set to Enter, slides in from the left. When set to Exit, slides out to the left.|
88| Right  | When set to Enter, slides in from the right. When set to Exit, slides out to the right.|
89| Top    | When set to Enter, slides in from the top. When set to Exit, slides out to the top.|
90| Bottom | When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom.|
91
92## Example
93
94Example 1: Apply different exit and entry animations based on different exit and entry types.
95
96```ts
97// index.ets
98import router from '@ohos.router'
99
100@Entry
101@Component
102struct Index {
103  @State scale1: number = 1
104  @State opacity1: number = 1
105
106  build() {
107    Column() {
108      Image($r("app.media.transition_image1")).width('100%').height('100%')
109    }
110    .width('100%')
111    .height('100%')
112    .scale({ x: this.scale1 })
113    .opacity(this.opacity1)
114    .onClick(() => {
115      router.pushUrl({ url: 'pages/Page1' })
116    })
117  }
118
119  pageTransition() {
120    PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
121      .onEnter((type: RouteType, progress: number) => {
122        if (type == RouteType.Push||type == RouteType.Pop) {
123          this.scale1 = progress
124          this.opacity1 = progress
125        }
126      })
127    PageTransitionExit({ duration: 1200, curve: Curve.Ease })
128      .onExit((type: RouteType, progress: number) => {
129        if (type == RouteType.Push) {
130          this.scale1 = 1 - progress
131          this.opacity1 = 1 - progress
132        }
133      })
134  }
135}
136```
137
138```ts
139// page1.ets
140import router from '@ohos.router'
141
142@Entry
143@Component
144struct Page1 {
145  @State scale2: number = 1
146  @State opacity2: number = 1
147
148  build() {
149    Column() {
150      Image($r("app.media.transition_image2")).width('100%').height('100%') // Store the image in the media folder.
151    }
152    .width('100%')
153    .height('100%')
154    .scale({ x: this.scale2 })
155    .opacity(this.opacity2)
156    .onClick(() => {
157      router.pushUrl({ url: 'pages/Index' })
158    })
159  }
160
161  pageTransition() {
162    PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
163      .onEnter((type: RouteType, progress: number) => {
164        if(type==RouteType.Push || type == RouteType.Pop)
165          this.scale2 = progress
166        this.opacity2 = progress
167
168      })
169    PageTransitionExit({ duration: 1200, curve: Curve.Ease })
170      .onExit((type: RouteType, progress: number) => {
171        if (type == RouteType.Pop) {
172          this.scale2 = 1 - progress
173          this.opacity2 = 1 - progress
174        }
175      })
176  }
177}
178```
179
180![pageTransition1](figures/pageTransition1.gif)
181
182Example 2: Apply the entrance animation of sliding in from the left and the exit animation of translating with opacity change.
183
184```ts
185// index.ets
186@Entry
187@Component
188struct PageTransitionExample {
189  build() {
190    Column() {
191      Navigator({ target: 'pages/page1', type: NavigationType.Push }) {
192        Image($r('app.media.bg1')).width('100%').height('100%')   // Store the image in the media folder.
193      }
194    }
195  }
196
197  // Use the default effects provided by the system, such as translation, scaling, and opacity.
198  pageTransition() {
199    // 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.
200    PageTransitionEnter({ duration: 1200 })
201      .slide(SlideEffect.Left)
202    // 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.
203    PageTransitionExit({ duration: 1000 })
204      .translate({ x: 100.0, y: 100.0 })
205      .opacity(0)
206  }
207}
208```
209
210```ts
211// page1.ets
212@Entry
213@Component
214struct PageTransitionExample1 {
215  build() {
216    Column() {
217      Navigator({ target: 'pages/index', type: NavigationType.Push }) {
218        Image($r('app.media.bg2')).width('100%').height('100%')    // Store the image in the media folder.
219      }
220    }
221  }
222
223  // Use the default effects provided by the system, such as translation, scaling, and opacity.
224  pageTransition() {
225    // 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.
226    PageTransitionEnter({ duration: 1000 })
227      .slide(SlideEffect.Left)
228    // 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.
229    PageTransitionExit({ duration: 1200 })
230      .translate({ x: 100.0, y: 100.0 })
231      .opacity(0)
232  }
233}
234```
235
236![pageTransition2](figures/pageTransition2.gif)
237