组件内转场主要通过transition属性配置转场参数，在组件插入和删除时显示过渡动效，主要用于容器组件中的子组件插入和删除时，提升用户体验（需要配合animateTo才能生效，动效时长、曲线、延时跟随animateTo中的配置）。

说明：从API Version 7开始支持。开发语言ets.

属性：

名称	参数类型	参数描述
transition	TransitionOptions	所有参数均为可选参数，详细描述见TransitionOptions参数说明。

TransitionOptions参数说明：

参数名称	参数类型	必填	参数描述
type	TransitionType	否	默认包括组件新增和删除。 默认值：TransitionType.All 说明： 不指定Type时说明插入删除使用同一种效果。
opacity	number	否	设置组件转场时的透明度效果，为插入时起点和删除时终点的值。 默认值：1
translate	{ x? : number, y? : number, z? : number }	否	设置组件转场时的平移效果，为插入时起点和删除时终点的值。 -x：横向的平移距离。 -y：纵向的平移距离。 -z：竖向的平移距离。
scale	{ x? : number, y? : number, z? : number, centerX? : number, centerY? : number }	否	设置组件转场时的缩放效果，为插入时起点和删除时终点的值。 -x：横向放大倍数（或缩小比例）。 -y：纵向放大倍数（或缩小比例）。 -z：竖向放大倍数（或缩小比例）。 - centerX、centerY缩放中心点。 - 中心点为0时，默认的是组件的左上角。
rotate	{ x?: number, y?: number, z?: number, angle?: Angle, centerX?: Length, centerY?: Length }	否	设置组件转场时的旋转效果，为插入时起点和删除时终点的值。 -x：横向的旋转向量。 -y：纵向的旋转向量。 -z：竖向的旋转向量。 - angle：旋转角度。 - centerX，centerY指旋转中心点。 - 中心点为（0，0）时，默认的是组件的左上角。

示例代码：

@Entry
@Component
struct TransitionAnimation_zj {
  @State flag: boolean = true
  @State show: string = 'show'

  build() {
    Column() {
      Button(this.show).width(80).height(30).margin(30)
        .onClick(() => {
          // 点击Button控制Image的显示和消失
          animateTo({ duration: 1000 }, () => {
            if (this.flag) {
              this.show = 'hide'
            } else {
              this.show = 'show'
            }
            this.flag = !this.flag
          })
        })
      if (this.flag) {
        // Image的显示和消失配置为不同的过渡效果
        Image($r('app.media.icon')).width(300).height(300)
          .transition({ type: TransitionType.Insert, scale: { x: 0, y: 1.0 } })
          .transition({ type: TransitionType.Delete, rotate: { angle: 180 } })
      }
    }.width('100%')
  }
}复制

示例效果：

参考地址：

文档中心