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. > ![]() > 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})
}
}