1# Enter/Exit Transition 2 3 4You can use [transition](../reference/arkui-ts/ts-transition-animation-component.md), a basic component transition API, to animate the process in which a component enters or exits the view. You can even use it with [TransitionEffect](../reference/arkui-ts/ts-transition-animation-component.md#transitioneffect10) to up your animation game. 5 6 7 **Table 1** Transition effect APIs 8 9| API| Description| Animation| 10| -------- | -------- | -------- | 11| IDENTITY | Disables the transition effect.| None.| 12| OPACITY | Applies the default opacity transition effect.| The component enters by changing the opacity from 0 to 1 and exits by changing the opacity from 1 to 0.| 13| SLIDE | Applies a sliding transition effect.| The component enters by sliding in from the left edge of the window and exits by sliding out from the right edge of the window.| 14| translate | Applies a translation transition effect.| The component enters by moving from the position set by the **translate** API to the default position (value **0**), and exits by moving from the default position (value **0**) to the position set by the **translate** API.| 15| rotate | Applies a rotation transition effect.| The component enters by rotating from the position set by the **rotate** API to the default position (value **0**), and exits by rotating from the default position (value **0**) to the position set by the **rotate** API.| 16| opacity | Applies an opacity transition effect.| The component enters by changing the opacity from the set value to **1** (default value) and exits by changing the opacity from **1** to the set value.| 17| move | Applies a transition effect by specifying which edge the component slides in and out of through [TransitionEdge](../reference/arkui-ts/ts-appendix-enums.md#transitionedge10).| The component enters by sliding in from the edge specified by **TransitionEdge** and exits by sliding out of the same edge.| 18| asymmetric | Applies an asymmetric transition effect.<br>- **appear**: enter transition effect.<br>- **disappear**: exit transition effect.| The component enters by applying the transition effect specified by **appear** and exits by applying the transition effect specified by **disappear**.| 19| combine | Combines with other transition effects.| The component enters and exits by combing with other transition effects.| 20| animation | Defines the animation settings for the transition effect.<br>- If animation settings are not specified here, the animation settings of **animateTo** will be used.<br>- Animation settings cannot be configured through the **animation** API of the component.<br>- The **onFinish** callback of the **animation** parameter in **TransitionEffect** does not take effect.| The API call sequence is from top to bottom. This means that the **animation** settings of **TransitionEffect** at the upper level also take effect on **TransitionEffect** at the lower level .| 21 22 231. Create a **TransitionEffect** object. 24 25 ```ts 26 // The component enters by applying all enter transition effects and exits by applying all exit transition effects. 27 // Define the animation settings for each transition effect. 28 private effect: object = 29 TransitionEffect.OPACITY // Apply an opacity transition effect. As the animation API is not called here, the animation settings of animateTo are used. 30 // Apply a scaling transition effect and specify springMotion (0.6, 1.2) as the curve. 31 .combine(TransitionEffect.scale({ x: 0, y: 0 }).animation({ curve: curves.springMotion(0.6, 1.2) })) 32 // Apply a rotation transition effect, whose animation settings follow TransitionEffect above, that is, springMotion (0.6, 1.2). 33 .combine(TransitionEffect.rotate({ angle: 90 })) 34 // Apply a translation transition effect, whose animation settings follow TransitionEffect above, that is, springMotion (0.6, 1.2). 35 .combine(TransitionEffect.translate({ x: 150, y: 150 }) 36 // Apply a move transition effect and specify springMotion as the curve. 37 .combine(TransitionEffect.move(TransitionEdge.END)).animation({curve: curves.springMotion()})) 38 // Apply an asymmetric transition effect. As the animation API is not called here, the animation settings follow TransitionEffect above, that is, springMotion. 39 .combine(TransitionEffect.asymmetric(TransitionEffect.scale({ x: 0, y: 0 }), TransitionEffect.rotate({ angle: 90 }))); 40 ``` 41 422. Set the transition effects to the component by calling [transition](../reference/arkui-ts/ts-transition-animation-component.md). 43 44 ```ts 45 Text('test') 46 .transition(effect) 47 ``` 48 493. Add or delete the component to trigger transition. 50 51 ```ts 52 @State isPresent: boolean = true; 53 ... 54 if (this.isPresent) { 55 Text('test') 56 .transition(effect) 57 } 58 ... 59 // Control the addition or deletion of the component. 60 // Method 1: Place the control variable in the animateTo closure. In this case, the transition effect for which the animation API is not call will follow the animation settings of animateTo. 61 animateTo({ curve: curves.springMotion() }, () => { 62 this.isPresent = false; 63 }) 64 65 // Method 2: Directly delete or add the component. In this case, the transition effects follow the animation settings specified by animation. 66 this.isPresent = false; 67 ``` 68 69 70 Below is the complete sample code and effect. In the example, the transition is triggered by deleting or adding a component. It can also be triggered by changing the variables in the **animateTo** closure. 71 72```ts 73import curves from '@ohos.curves'; 74 75@Entry 76@Component 77struct TransitionEffectDemo { 78 @State isPresent: boolean = false; 79 80 // Step 1: Create a TransitionEffect object. 81 private effect: TransitionEffect = 82 // Apply the default opacity transition effect and specify springMotion (0.6, 0.8) as the curve. 83 TransitionEffect.OPACITY.animation({ curve: curves.springMotion(0.6, 0.8) }) 84 // Combine with a scale transition effect, whose animation settings follow TransitionEffect above, that is, springMotion(0.6, 0.8). 85 .combine(TransitionEffect.scale({ x: 0, y: 0 })) 86 // Apply a rotation transition effect, whose animation settings follow TransitionEffect above, that is, springMotion(0.6, 0.8). 87 .combine(TransitionEffect.rotate({ angle: 90 })) 88 // Apply a translation transition effect, whose animation settings are specified by animation, which is springMotion(). 89 .combine(TransitionEffect.translate({ y: 150 }).animation({ curve: curves.springMotion() })) 90 // Apply a movement transition effect, whose animation settings follow TransitionEffect above, that is, springMotion(). 91 .combine(TransitionEffect.move(TransitionEdge.END)) 92 93 build() { 94 Stack() { 95 if (this.isPresent) { 96 Column() { 97 Text('ArkUI') 98 .fontWeight(FontWeight.Bold) 99 .fontSize(20) 100 .fontColor(Color.White) 101 } 102 .justifyContent(FlexAlign.Center) 103 .width(150) 104 .height(150) 105 .borderRadius(10) 106 .backgroundColor(0xf56c6c) 107 // Step 2: Set the transition effects to the component through the transition API. 108 .transition(this.effect) 109 } 110 111 // Border 112 Column() 113 .width(155) 114 .height(155) 115 .border({ 116 width: 5, 117 radius: 10, 118 color: Color.Black 119 }) 120 121 // Step 3: Add or delete the component to trigger transition. 122 Button('Click') 123 .margin({ top: 320 }) 124 .onClick(() => { 125 this.isPresent = !this.isPresent; 126 }) 127 } 128 .width('100%') 129 .height('60%') 130 } 131} 132``` 133 134 135 136 137 138 139When adding transition effects to multiple components, you can configure different **delay** values in animation parameters of these effects so that the components exit one by one. 140 141```ts 142const ITEM_COUNTS = 9; 143const ITEM_COLOR = '#ED6F21'; 144const INTERVAL = 30; 145const DURATION = 300; 146 147@Entry 148@Component 149struct Index1 { 150 @State isGridShow: boolean = false; 151 152 private dataArray: number[] = new Array(ITEM_COUNTS); 153 154 aboutToAppear(): void { 155 for (let i = 0; i < ITEM_COUNTS; i++) { 156 this.dataArray[i] = i; 157 } 158 } 159 160 build() { 161 Stack() { 162 if (this.isGridShow) { 163 Grid() { 164 ForEach(this.dataArray, (item: number, index: number) => { 165 GridItem() { 166 Stack() { 167 Text((item + 1).toString()) 168 } 169 .size({ width: 50, height: 50 }) 170 .backgroundColor(ITEM_COLOR) 171 .transition(TransitionEffect.OPACITY 172 .combine(TransitionEffect.scale({ x: 0.5, y: 0.5 })) 173 // Add delay to the transition of each grid cell so that the grid cells exit one by one. 174 .animation({ duration: DURATION, curve: Curve.Friction, delay: INTERVAL * index })) 175 .borderRadius(10) 176 } 177 // When the grid cells exit, if the transition effect is not added to the parent component, the exit transition effect does not take effect. 178 // Here the parent component of the grid cells is configured to always display with a 0.99 opacity when the cells exit. In this way, the transition effect of grid cells is not affected. 179 .transition(TransitionEffect.opacity(0.99)) 180 }, (item: number) => item.toString()) 181 } 182 .columnsTemplate('1fr 1fr 1fr') 183 .rowsGap(15) 184 .columnsGap(15) 185 .size({ width: 180, height: 180 }) 186 // When the grid cells exit, if the transition effect is not added to the parent component, the exit transition effect does not take effect. 187 // Here the parent component of the grid cells is configured to always display with a 0.99 opacity when the cells exit. In this way, the transition effect of grid cells is not affected. 188 .transition(TransitionEffect.opacity(0.99)) 189 } 190 } 191 .size({ width: '100%', height: '100%' }) 192 .onClick(() => { 193 animateTo({ 194 duration: DURATION + INTERVAL * (ITEM_COUNTS - 1), 195 curve: Curve.Friction 196 }, () => { 197 this.isGridShow = !this.isGridShow; 198 }) 199 }) 200 } 201} 202``` 203 204 205
