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 appearance and disappearance of a component. 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 appears by changing the opacity from 0 to 1 and disappears by changing the opacity from 1 to 0.| 13| SLIDE | Applies a sliding transition effect.| The component appears by sliding in from the left edge of the window and disappears by sliding out from the right edge of the window.| 14| translate | Applies a translation transition effect.| The component appears by moving from the position set by the **translate** API to the default position (value **0**), and disappears 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 appears by rotating from the position set by the **rotate** API to the default position (value **0**), and disappears 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 appears by changing the opacity from the set value to **1** (default value) and disappears 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 appears by sliding in from the edge specified by **TransitionEdge** and disappears by sliding out of the same edge.| 18| asymmetric | Applies an asymmetric transition effect.<br>**appear**: transition effect for appearance.<br>**disappear**: transition effect for disappearance.| The component appears by applying the transition effect specified by **appear** and disappears by applying the transition effect specified by **disappear**.| 19| combine | Combines with other transition effects.| The component appears and disappears 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 appears by applying all transition effects for appearance and disappears by applying all transition effects for disappearance. 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 (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. 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. Control the addition or deletion of the component. 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
