1# Shared Element Transition (sharedTransition)
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            | Type         | Mandatory                                   | Description                                                    |
14| ---------------- | -----------------|------------------------------------------- | ------------------------------------------------------------ |
15|      id          |  string         | Yes                                        |    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.|
16|     options          |  [sharedTransitionOptions](#sharedtransitionoptions)       | No    |  Parameters of the shared element transition animation.|
17
18> **NOTE**
19>
20> **motionPath** is effective only when **type** is set to **SharedTransitionEffectType.Exchange**.
21
22## sharedTransitionOptions
23
24**Atomic service API**: This API can be used in atomic services since API version 11.
25
26| Name             | Type     | Mandatory      | Description                                                     |
27| ----------------- | -------------|-------------- | --------------------------------------------------------------|
28| duration          |     number   |  No          | Animation duration.<br>Default value: **1000**<br>Unit: ms|
29| curve             |      [Curve](ts-appendix-enums.md#curve) \| string \| [ICurve](../js-apis-curve.md#icurve9)<sup>10+</sup>  | No| Animation curve.<br>Default value: **Curve.Linear**|
30| delay          |     number   |  No          | Delay of animation playback.<br>Default value: **0**<br>Unit: ms|
31| motionPath          | [MotionPathOptions](./ts-motion-path-animation.md)  |  No          | Motion path.|
32| zIndex          |     number   |  No             | Z-axis.|
33| type           |     [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)   |  No  | Animation type.<br>Default value: **SharedTransitionEffectType.Exchange**|
34
35
36## Example
37
38This 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.
39
40```ts
41// xxx.ets
42@Entry
43@Component
44struct SharedTransitionExample {
45  @State active: boolean = false
46
47  build() {
48    Column() {
49      Navigator({ target: 'pages/PageB', type: NavigationType.Push }) {
50        Image($r('app.media.ic_health_heart')).width(50).height(50)
51          .sharedTransition('sharedImage', { duration: 800, curve: Curve.Linear, delay: 100 })
52      }.padding({ left: 20, top: 20 })
53      .onClick(() => {
54        this.active = true
55      })
56    }
57  }
58}
59```
60
61```ts
62// PageB.ets
63@Entry
64@Component
65struct pageBExample {
66  build() {
67    Stack() {
68      Image($r('app.media.ic_health_heart')).width(150).height(150)
69        .sharedTransition('sharedImage', { duration: 800, curve: Curve.Linear, delay: 100 })
70    }.width('100%').height('100%')
71  }
72}
73```
74
75![shared](figures/shared.gif)
76