1# 组件内转场 2 3组件内转场主要通过transition属性配置转场参数，在组件插入和删除时显示过渡动效，主要用于容器组件中的子组件插入和删除时，提升用户体验（需要配合[animateTo](ts-explicit-animation.md)才能生效，动效时长、曲线、延时跟随animateTo中的配置）。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 属性 11 12 13| 名称 | 参数类型 | 参数描述 | 14| -------- | -------- | -------- | 15| transition | TransitionOptions | 设置组件插入显示和删除隐藏的过渡效果。<br/>默认值：不设置任何过渡效果时，默认有透明度从0到1的过渡效果。若设置了其他过渡效果，以设置的过渡效果为准。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>所有参数均为可选参数，详细描述见TransitionOptions参数说明。 | 16 17## TransitionOptions参数说明 18 19| 参数名称 | 参数类型 | 必填 | 参数描述 | 20| -------- | -------- | -------- | -------- | 21| type | [TransitionType](ts-appendix-enums.md#transitiontype) | 否 | 默认包括组件新增和删除。<br/>默认值：TransitionType.All<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：**<br/>不指定Type时说明插入删除使用同一种效果。 | 22| opacity | number | 否 | 设置组件转场时的透明度效果，为插入时起点和删除时终点的值。<br/>默认值：1<br/>取值范围： [0, 1]<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>设置小于0或大于1的非法值时，按1处理。 | 23| translate | {<br/>x? : number \| string,<br/>y? : number \| string,<br/>z? : number \| string<br/>} | 否 | 设置组件转场时的平移效果，为插入时起点和删除时终点的值。<br/>-x：横向的平移距离。<br/>-y：纵向的平移距离。<br/>-z：竖向的平移距离。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 24| scale | {<br/>x? : number,<br/>y? : number,<br/>z? : number,<br/>centerX? : number \| string,<br/>centerY? : number \| string<br/>} | 否 | 设置组件转场时的缩放效果，为插入时起点和删除时终点的值。<br/>-x：横向放大倍数（或缩小比例）。<br/>-y：纵向放大倍数（或缩小比例）。<br/>-z：竖向放大倍数（或缩小比例）。<br/>- centerX、centerY指缩放中心点，centerX和centerY默认值是"50%"。<br/>- 中心点为0时，默认的是组件的左上角。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 25| rotate | {<br/>x?: number,<br/>y?: number,<br/>z?: number,<br/>angle: number \| string,<br/>centerX?: number \| string,<br/>centerY?: number \| string<br/>} | 否 | 设置组件转场时的旋转效果，为插入时起点和删除时终点的值。<br/>-x：横向的旋转向量。<br/>-y：纵向的旋转向量。<br/>-z：竖向的旋转向量。<br/>- centerX,centerY指旋转中心点，centerX和centerY默认值是"50%"。<br/>- 中心点为（0，0）时，默认的是组件的左上角。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 26 27 28## 示例 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 // 点击Button控制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 // 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 63示意图： 64 65图片完全显示时： 66 67 68 69图片消失时配置顺时针旋转180°的过渡效果： 70 71 72 73图片完全消失时： 74 75 76 77图片显示时配置横向放大一倍的过渡效果： 78 79
