# Component Transition
>  **NOTE**
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
Configure the component transition animations for when a component is inserted or deleted, which improves user experience. This feature takes effect only when **animateTo** is used. The animation duration, curve, and delay are the same as those configured in **animateTo**.
## Attributes
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| transition | Object | - | All parameters are optional. For details, see **transition** parameters. |
- transition parameters
| Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
| type | TransitionType | TransitionType.All | No | Transition type, which includes component addition and deletion by default.
>  **NOTE**
> If **type** is not specified, insertion and deletion use the same transition type. |
| opacity | number | 1 | No | Opacity effect during component transition, which is the value of the start point of insertion and the end point of deletion. |
| translate | {
x? : number,
y? : number,
z? : number
} | - | No | Translation effect during component transition, which is the value of the start point of insertion and the end point of deletion. |
| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number,
centerY? : number
} | - | No | Scaling effect during component transition, which is the value of the start point of insertion and the end point of deletion. |
| rotate | {
x?: number,
y?: number,
z?: number,
angle?: Angle,
centerX?: Length,
centerY?: Length
} | - | No | Rotation effect during component transition, which is the value of the start point of insertion and the end point of deletion. |
- TransitionType enums
| Name | Description |
| -------- | -------- |
| All | The transition takes effect in all scenarios. |
| Insert | The transition takes effect when a component is inserted. |
| Delete | The transition takes effect when a component is deleted. |
## Example
The following example shows how to use a button to control the appearance and disappearance of another button, and how to configure the required transition animations.
```
@Entry
@Component
struct TransitionExample {
@State btn1: boolean = false
@State show: string = "show"
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,}) {
Button(this.show).width(80).height(30).backgroundColor(0x317aff).margin({bottom:50})
.onClick(() => {
animateTo({ duration: 1000 }, () => {
this.btn1 = !this.btn1
if(this.btn1){
this.show = "hide"
}else{
this.show = "show"
}
})
})
if (this.btn1) {
// The insertion and deletion have different transition effects.
Button() {
Image($r('app.media.bg1')).width("80%").height(300)
}.transition({ type: TransitionType.Insert, scale : {x:0,y:1.0} })
.transition({ type: TransitionType.Delete, scale: { x: 1.0, y: 0.0 } })
}
}.height(400).width("100%").padding({top:100})
}
}
```
