# Component Transition 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 the description of Transition parameters.
- Transition parameters

Name

Type

Default Value

Mandatory

Description

type

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}) } } ``` ![](figures/transition.gif)