1# Shared Element Transition 2 3A shared element transition is a transition animation applied to a component that is present on two pages. This component is called the shared element and can be set in the **sharedTransition** attribute. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Attributes 11 12 13| Name | Parameter | Description | 14| ---------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | 15| sharedTransition | id: string,<br>{<br> duration?: number,<br> curve?: [Curve](ts-appendix-enums.md#curve) \| string \| [ICurve](../apis/js-apis-curve.md#icurve)<sup>10+</sup>,<br> delay?: number,<br> motionPath?: <br>{<br> path: string,<br> form?: number,<br> to?: number,<br> rotatable?: boolean<br>},<br>zIndex?: number,<br>type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)<br>} | Transition of the shared element. If the same **id** value is configured for a component on the two pages, this component is considered as a shared element of the pages. If the **id** value is an empty string, no transition will be applied to the component.<br>- **id**: component ID.<br>- **duration**: animation duration.<br>Default value: **1000**<br>Unit: ms<br>Value range: [0, +∞)<br>The value **0** indicates that no animation is applied. A value less than 0 evaluates to the default value **1000**.<br>- **curve**: animation curve. The default curve is **Curve.Linear**.<br>- **delay**: animation delay.<br>Default value: **0**<br>Unit: ms<br>Value range: [0, +∞)<br>A value less than 0 evaluates to the value **0**.<br>- **motionPath**: motion path information. For details, see [Motion Path Animation](ts-motion-path-animation.md).<br>{<br>- **path**: path.<br>- **from**: start value.<br>- **to**: end value.<br>- **rotatable**: whether to rotate.<br>Default value: **false**<br> }<br>- **zIndex**: z-axis.<br>Default value: **0**<br>- **type**: animation type.<br>Default value: **SharedTransitionEffectType.Exchange**| 16 17> **NOTE** 18> 19> **motionPath** is effective only when **type** is set to **SharedTransitionEffectType.Exchange**. 20 21## Example 22 23This example implements the custom transition of a shared image during redirection from one page to another, which is triggered by a click on the image. 24 25```ts 26// xxx.ets 27@Entry 28@Component 29struct SharedTransitionExample { 30 @State active: boolean = false 31 32 build() { 33 Column() { 34 Navigator({ target: 'pages/PageB', type: NavigationType.Push }) { 35 Image($r('app.media.ic_health_heart')).width(50).height(50) 36 .sharedTransition('sharedImage', { duration: 800, curve: Curve.Linear, delay: 100 }) 37 }.padding({ left: 20, top: 20 }) 38 .onClick(() => { 39 this.active = true 40 }) 41 } 42 } 43} 44``` 45 46```ts 47// PageB.ets 48@Entry 49@Component 50struct pageBExample { 51 build() { 52 Stack() { 53 Image($r('app.media.ic_health_heart')).width(150).height(150) 54 .sharedTransition('sharedImage', { duration: 800, curve: Curve.Linear, delay: 100 }) 55 }.width('100%').height('100%') 56 } 57} 58``` 59 60 61
