diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001193544358.gif b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001193544358.gif new file mode 100644 index 0000000000000000000000000000000000000000..62bf33b76b0c0e257efa48131d0acd2249a2bb04 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001193544358.gif differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001238424309.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001238424309.png new file mode 100644 index 0000000000000000000000000000000000000000..70aa78c1973add7bf07ec822d905c1bc98cb47f9 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001238424309.png differ diff --git a/en/application-dev/reference/arkui-js/js-components-common-transition.md b/en/application-dev/reference/arkui-js/js-components-common-transition.md index 178744a2fd94334a2d22a4d2c55ff0b431d39419..09bc84c24156c80426cbc9a09800459d577626df 100644 --- a/en/application-dev/reference/arkui-js/js-components-common-transition.md +++ b/en/application-dev/reference/arkui-js/js-components-common-transition.md @@ -1,96 +1,46 @@ -# Transition Styles - - -## Transition of Shared Elements - -### Attributes - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Description

-

shareid

-

string

-

N/A

-

Used for the transition of shared elements and takes effect only when it is configured. list-item, image, text, button, label components are supported for the transition of shared elements.

-
- -### Styles - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Description

-

shared-transition-effect

-

string

-

exchange

-

Entry style of a shared element during transition.

-
  • exchange (default): The source page element is moved to the position of the target page element and is zoomed in or out properly.
  • static: The position of the target page element remains unchanged. You can configure the transparency animation. Currently, only the static effect configured on the target page takes effect.
-

shared-transition-name

-

string

-

-

-

During the transition, the style configured on the target page takes effect preferentially. This style is used to configure the animation effect of shared elements. The animation effect is an animation sequence defined by @keyframes supporting transform and transparency animations. If the effect of the shared element conflicts with the custom animation, the latter is used.

-

shared-transition-timing-function

-

string

-

friction

-

During the transition, the style configured on the target page takes effect preferentially. This property defines the difference curve during the transition of shared elements. If this parameter is not configured, the friction curve is used by default.

-
- -### Important Notes - -1. If shared element transition style and customized page transition style are both configured, the latter is used. - -2. The exchange effect of the shared element is similar to the transition shown in the following figure. - -**Figure 1** Default transition effect of shared elements -![](figures/default-transition-effect-of-shared-elements.png "default-transition-effect-of-shared-elements") - -3. The shared element animation does not take effect for the border and background color of the element. +# Transition Styles + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> Supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. + +## Transition of Shared Elements + + +### Attributes + +| Name| Type| Default Value| Description| +| -------- | -------- | -------- | -------- | +| shareid | string | -| Used for the transition of shared elements and takes effect only when it is configured.**list-item**, **image**, **text**, **button**, and **label** components are supported for the transition of shared elements.| + + +### Styles + +| Name| Type| Default Value| Description| +| -------- | -------- | -------- | -------- | +| shared-transition-effect | string | exchange | Entry style of a shared element during transition.
- **exchange** (default): The source page element is moved to the position of the target page element and is zoomed in or out properly.
- **static**: The position of the target page element remains unchanged. You can configure the opacity animation. Currently, only the static effect configured on the target page takes effect.| +| shared-transition-name | string | - | During the transition, the style configured on the target page takes effect preferentially. This style is used to configure the animation effect of shared elements. The animation effect is an animation sequence defined by **@keyframes** supporting transform and opacity animations. If the effect of shared elements conflicts with the custom animation, the latter is used.| +| shared-transition-timing-function | string | friction | During the transition, the style configured on the target page takes effect preferentially. This style defines the difference curve during the transition of shared elements. If it is not configured, the friction curve is used.| + + +### Important Notes + +1. If the shared element transition style and custom page transition style are both configured, the latter is used. + +2. The exchange effect of shared elements is similar to the transition shown below. + +**Figure 1** Default transition effect of shared elements +![en-us_image_0000001238424309](figures/en-us_image_0000001238424309.png) + +3. The animation of a shared element does not take effect for the border and background color of the element. 4. During the transition of a shared element, the page element is hidden. Therefore, the animation style and function set for the page element are invalid. -5. During the dynamic change of **shareid**5+, if the **shareid** value in component A is overwritten by that in component B, the shared element effect of component A becomes ineffective and will not be restored even if the **shareid** value is changed in component B. +5. During the dynamic change of **shareid**5+, if the **shareid** value in component A is overwritten by that in component B, the shared element effect of component A becomes ineffective and will not be restored even if the **shareid** value is changed in component B. + -### Example +### Example -Page A jumps to Page B. The shared element is **image**, and the **shareid** is "shareImage". +In the example below, where **PageA** jumps to **PageB**, the shared element is **image**, and the **shareid** is "shareImage". ``` @@ -98,10 +48,8 @@ Page A jumps to Page B. The shared element is **image**, and the **shareid**
-
- - Click on picture to Jump to ths details -
+ + Click on picture to Jump to ths details
@@ -161,40 +109,23 @@ export default { } ``` -## Card Transition - ->![](../../public_sys-resources/icon-note.gif) **NOTE:** ->Card transitions are not available when other transitions \(including shared element transitions and custom transitions\) are used. - -### Styles - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Description

-

transition-effect

-

string

-

-

-

Whether a component on the current page displays the transition effect during a card transition. Available values are as follows:

-
  • unfold: The component will move upwards by one card height if the component locates above the card tapped by users, or move downwards by one card height if the component locates below the card.
  • none: No transition effect is displayed.
-
- -### Example - -The **source\_page** has a title area on the top and a card list. Users can tap a card to switch to the **target\_page**. + +## Card Transition + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> Card transitions are not available when other transitions (including shared element transitions and custom transitions) are used. + + +### Styles + +| Name| Type| Default Value| Description| +| -------- | -------- | -------- | -------- | +| transition-effect | string | - | Whether a component on the current page displays the transition effect during a card transition. Available values are as follows:
- **unfold**: The component will move upwards by one card height if the component is located above the card tapped by the user, or move downwards by one card height if the component is located below the card.
- **none**: No transition effect is displayed.| + + +### Example + +The **source_page** has a title area on the top and a card list. Users can tap a card to switch to the **target_page**. ``` @@ -275,74 +206,174 @@ export default { } ``` -![](figures/form-transfer.gif) - -## Page Transition Styles - -### Styles - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Description

-

transition-enter

-

string

-

-

-

Related to @keyframes, which supports transform and transparent animations. For details, see Table 2.

-

transition-exit

-

string

-

-

-

Related to @keyframes, which supports transform and transparent animations. For details, see Table 2.

-

transition-duration

-

string

-

Follows the default page transition time of the device.

-

The unit can be s or ms. The default unit is ms. If no value is specified, the default value is used.

-

transition-timing-function

-

string

-

friction

-

Speed curve of executing transition animation for smoother transition. For details about the parameters, see the description of the valid values of animation-timing-function in Animation Styles.

-
- -### Important Notes - -1. When you set a customized transition, set the background color of the page to an opaque color. Otherwise, the transition effect can be harsh. -2. The **transition-enter** and **transition-exit** parameters can be configured separately. The default parameters are used if they are not configured. -3. Notes on the **transition-enter** and **transition-exit** parameters: - 1. In the push scenario, enter the animation described by **transition-enter** of the **Page2.js** application in the page stack; enter the animation described by **transition-exit** of the **Page1.js** application in the second position of the page stack. - - ![](figures/en-us_image_0000001193704354.png) - - 2. In the back scenario, exit the animation described by **transition-enter** of the **Page2.js** application in the page stack and play the animation in reverse sequence; exit the animation described by **transition-exit** of the Page1.js application in the second position of the page stack and play the animation in reverse sequence. - - ![](figures/en-us_image_0000001238184345.png) - - - +![en-us_image_0000001193544358](figures/en-us_image_0000001193544358.gif) + + +## Page Transition Styles + + +### Styles + +| Name| Type| Default Value| Description| +| -------- | -------- | -------- | -------- | +| transition-enter | string | - | Works with **@keyframes** and supports transform and opacity animations. For details, see [Attributes available for the @keyframes rule](../arkui-js/js-components-common-animation.md).| +| transition-exit | string | - | Works with **@keyframes** and supports transform and opacity animations. For details, see [Attributes available for the @keyframes rule](../arkui-js/js-components-common-animation.md).| +| transition-duration | string | Follows the default page transition time of the device| The unit can be s or ms. The default unit is ms. If no value is specified, the default value is used. | +| transition-timing-function | string | friction | Speed curve of the transition animation, which makes the animation more fluent. For details, see the description of **animation-timing-function **in [Animation Styles](../arkui-js/js-components-common-animation.md).| + + +### Important Notes + +1. When defining a custom transition, set the page background color to an opaque color. Otherwise, the transition effect can be harsh. + +2. The **transition-enter** and **transition-exit** styles can be configured separately. The default settings are used if they are not configured. + +3. Notes on the **transition-enter** and **transition-exit** styles: + + a. In the push scenario, the animation defined by **transition-enter** is used for entering the **Page2.js** in the page stack; the animation defined by **transition-exit** is used for entering the **Page1.js** in the page stack. + ![en-us_image_0000001193704354](figures/en-us_image_0000001193704354.png) + + b. In the back scenario, the animation defined by **transition-enter** is used for exiting the **Page2.js** in the page stack, with the animation played in reverse sequence; the animation defined by **transition-exit** is used for exiting the **Page1.js** in the page stack, with the animation played in reverse sequence. + ![en-us_image_0000001238184345](figures/en-us_image_0000001238184345.png) + +### Example + +**Page1** has an opaque box. When you tap the box, **Page2** is displayed. When you tap the box on **Page2**, **Page1** is displayed. + +1. Page1 + + ``` + +
+ index +
+
+ ``` + + ``` + + import router from '@system.router'; + export default { + data: { + + }, + jump() { + router.push({ + uri:'pages/transition2/transition2' + }) + } + } + ``` + + ``` + + .container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + } + .move_page { + width: 100px; + height: 100px; + background-color: #72d3fa; + transition-enter: go_page; + transition-exit: exit_page; + transition-duration: 5s; + transition-timing-function: friction; + } + + @keyframes go_page { + from { + opacity: 0; + transform: translate(0px) rotate(60deg) scale(1.0); + } + + to { + opacity: 1; + transform: translate(100px) rotate(360deg) scale(1.0); + } + } + @keyframes exit_page { + from { + opacity: 1; + transform: translate(200px) rotate(60deg) scale(2); + } + + to { + opacity: 0; + transform: translate(200px) rotate(360deg) scale(2); + } + } + ``` + + + +2. Page2 + + ``` + +
+ transition +
+
+ import router from '@system.router'; + export default { + data: { + + }, + jumpBack() { + router.back() + } + } + ``` + + ``` + + .container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + } + + .move_page { + width: 100px; + height: 100px; + background-color: #f172fa; + transition-enter: go_page; + transition-exit: exit_page; + transition-duration: 5s; + transition-timing-function: ease; + } + + @keyframes go_page { + from { + opacity: 0; + transform:translate(100px) rotate(0deg) scale(1.0); + } + to { + opacity: 1; + transform:translate(100px) rotate(180deg) scale(2.0); + } + } + + @keyframes exit_page { + from { + opacity: 1; + transform: translate(0px) rotate(60deg) scale(1); + } + to { + opacity: 0; + transform: translate(0px) rotate(360deg) scale(1); + } + } + ``` + + ![transition](figures/transition.gif)