提交 380b1f89 编写于 作者: E ester.zhou

update doc

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 34787e37
# Transition of Shared Elements # Transition of Shared Elements
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> This animationis supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > This animationis supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
Shared element transition can be used for transition between pages, for example, transition from an image on the current page to the next page. Transition of shared elements can be used for transition between pages, for example, transition from an image on the current page to the next page.
## Type ## Type
| Name | Type | Default Value | Description | | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| sharedTransition | id: string,<br/>options?: Object | - | If the same ID is configured for a component on the two pages, this shared component is transited. If this parameter is set to an empty string, no shared elements are transited. | | sharedTransition | id: string,<br/>options?: Object | - | If the same ID is configured for a component on the two pages, this shared component is transited. If this parameter is set to an empty string, no shared elements are transited. |
- options parameters - options parameters
| Name | Type | Default Value | Mandatory | Description | | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| duration | number | 1000 | No | Animation duration, in ms. The default duration is 1000 ms. | | duration | number | 1000 | No | Animation duration, in ms. The default duration is 1000 ms. |
| curve | Curve \| Curves | Linear | No | The default curve is linear. For details about the valid values, see **Curve enums**. | | curve | Curve \| Curves | Linear | No | The default curve is linear. For details about the valid values, see **Curve enums**. |
| delay | number | 0 | No | Delay of animation playback, in ms. By default, the playback is not delayed. | | delay | number | 0 | No | Delay of animation playback, in ms. By default, the playback is not delayed. |
## Example ## Example
The example shows the transition of a shared element from a page and page B. The example shows the transition of a shared element from a page and page B.
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct SharedTransitionExample { struct SharedTransitionExample {
@State scale: number = 1
@State opacity: number = 1
@State active: boolean = false @State active: boolean = false
build() { build() {
...@@ -55,9 +54,8 @@ struct SharedTransitionExample { ...@@ -55,9 +54,8 @@ struct SharedTransitionExample {
} }
``` ```
```ts
``` // PageB.ets
// PageB
@Entry @Entry
@Component @Component
struct BExample { struct BExample {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册