1# Component Transition 2 3Configure the component transition animations for when a component is inserted or deleted. This feature takes effect only when [animateTo](ts-explicit-animation.md) is used. The animation duration, curve, and delay are the same as those configured in **animateTo**. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Attributes 11 12 13| Name| Type| Description| 14| -------- | -------- | -------- | 15| transition | TransitionOptions | Transition effects when the component is inserted, displayed, deleted, or hidden.<br>If no transition effect is set, an opacity transition from 0 to 1 is applied. <br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>Transition parameters, which are all optional. For details, see **TransitionOptions**.| 16 17## TransitionOptions 18 19| Name| Type| Mandatory| Description| 20| -------- | -------- | -------- | -------- | 21| type | [TransitionType](ts-appendix-enums.md#transitiontype) | No| Transition type, which includes component addition and deletion by default.<br>Default value: **TransitionType.All**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>If **type** is not specified, insertion and deletion use the same transition type.| 22| opacity | number | No| Opacity of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>Default value: **1**<br>Value range: [0, 1]<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 or greater than 1 evaluates to the value **1**.| 23| translate | {<br>x? : number \| string,<br>y? : number \| string,<br>z? : number \| string<br>} | No| Translation of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>-**x**: distance to translate along the x-axis.<br>-**y**: distance to translate along the y-axis.<br>-**z**: distance to translate along the z-axis.<br>Since API version 9, this API is supported in ArkTS widgets.| 24| scale | {<br>x? : number,<br>y? : number,<br>z? : number,<br>centerX? : number \| string,<br>centerY? : number \| string<br>} | No| Scaling of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>- **x**: scale factor along the x-axis.<br>- **y**: scale factor along the y-axis.<br>- **z**: scale factor along the z-axis.<br>- **centerX** and **centerY**: x coordinate and y coordinate of the scale center, respectively. The default values are both **"50%"**.<br>- If the center point is 0, it indicates the upper left corner of the component.<br>Since API version 9, this API is supported in ArkTS widgets.| 25| rotate | {<br>x?: number,<br>y?: number,<br>z?: number,<br>angle: number \| string,<br>centerX?: number \| string,<br>centerY?: number \| string<br>} | No| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>- **x**: rotation vector along the x-axis.<br>- **y**: rotation vector along the y-axis.<br>- **z**: rotation vector along the z-axis.<br>- **centerX** and **centerY**: x coordinate and y coordinate of the rotation center, respectively. The default values are both **"50%"**.<br>- If the center point is (0, 0), it indicates the upper left corner of the component.<br>Since API version 9, this API is supported in ArkTS widgets.| 26 27 28## Example 29 30```ts 31// xxx.ets 32@Entry 33@Component 34struct TransitionExample { 35 @State flag: boolean = true 36 @State show: string = 'show' 37 38 build() { 39 Column() { 40 Button(this.show).width(80).height(30).margin(30) 41 .onClick(() => { 42 // Click the button to show or hide the image. 43 animateTo({ duration: 1000 }, () => { 44 if (this.flag) { 45 this.show = 'hide' 46 } else { 47 this.show = 'show' 48 } 49 this.flag = !this.flag 50 }) 51 }) 52 if (this.flag) { 53 // Apply different transition effects to the showing and hiding of the image. 54 Image($r('app.media.testImg')).width(300).height(300) 55 .transition({ type: TransitionType.Insert, scale: { x: 0, y: 1.0 } }) 56 .transition({ type: TransitionType.Delete, rotate: { angle: 180 } }) 57 } 58 }.width('100%') 59 } 60} 61``` 62 63Diagrams: 64 65When the image is completely displayed: 66 67 68 69When the transition effect of 180° clockwise rotation is applied to the hiding of the image: 70 71 72 73When the image disappears completely: 74 75 76 77When the transition effect of zooming in twice horizontally is applied to the image displayed: 78 79 80
