Transition Styles

Transition of Shared Elements
Precautions for Shared Elements
Sample Code
Card Transition
Example Code
Page Transition Styles
Precautions for Page Transition

Transition of Shared Elements

Table 1 Transition of shared elements

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.

Table 2 Transition styles of shared elements

Name	Type	Default Value	Description
shared-transition-effect	string	exchange	Entry style of shared elements during the transition, which can be exchange or static. During the transition, the style configured on the target page takes effect preferentially. exchange: 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 attribute defines the difference curve during the transition of shared elements. The friction curve is used by default if this parameter is not configured.

Name

Type

Default Value

Description

shared-transition-effect

string

exchange

Entry style of shared elements during the transition, which can be exchange or static.

During the transition, the style configured on the target page takes effect preferentially.

exchange: 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 attribute defines the difference curve during the transition of shared elements. The friction curve is used by default if this parameter is not configured.

Precautions for Shared Elements

If shared element transition style and customized page transition style are both configured, the latter is used.
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

The shared element animation does not take effect for the border and background color of the element.
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.
During the dynamic change of shareid, 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. ⁵⁺

Sample Code

Page A jumps to Page B. The shared element is image, and the shareid is "shareImage".

<!-- PageA -->
<!-- xxx.hml -->
<div>
  <list>
    <list-item type="description">
      <image src="item.jpg" shareid="shareImage" onclick="jump" class="shared-transition-style"></image>
      <text onclick="jump">Click on picture to Jump to ths details</text>
    </list-item>
  </list>
</div>

// xxx.js
import router from '@system.router';
export default {
  jump() {
    router.push({
      uri: 'detailpage',
    });
  },
}

/* xxx.css */
.shared-transition-style {
  shared-transition-effect: exchange;
  shared-transition-name: shared-transition;
}
@keyframes shared-transition {
  from { opacity: 0; }
  to { opacity: 1; }
}

<!-- PageB -->
<!-- xxx.hml -->
<div>
  <image src="itemDetail.jpg" shareid="shareImage" onclick="jumpBack" class="shared-transition-style"></image>
</div>

// xxx.js
import router from '@system.router';
export default {
  jumpBack() {
    router.back();
  },
}

/* xxx.css */
.shared-transition-style {
  shared-transition-effect: exchange;
  shared-transition-name: shared-transition;
}
@keyframes shared-transition {
  from { opacity: 0; }
  to { opacity: 1; }
}

Card Transition

Table 3 Card transition style

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.

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.

NOTE: Card transitions are not available when other transitions (including shared element transitions and custom transitions) are used.

Example Code

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.

<!-- source_page -->
<!-- xxx.hml -->
<div class="container">
  <div class="outer">
    <text style="font-size: 23px; margin-bottom: 20px" >MAIN TITLE</text>
  </div>
  <list style="width:340px;height:600px;flex-direction:column;justify-content:center;align-items:center">
    <list-item type="listItem" class="item" card="true" for="list" id="{{$item.id}}"
        onclick="jumpPage({{$item.id}}, {{$item.uri}})">
      <text style="margin-left: 10px; font-size: 23px;">{{$item.title}}</text>
    </list-item>
  </list>
</div>

// xxx.js
import router from '@system.router'
export default {
  data: { list: [] },
  onInit() {
    for(var i = 0; i < 10; i++) {
      var item = { uri: "pages/card_transition/target_page/index", 
                   title: "this is title" + i, id: "item_" + i }
      this.list.push(item);
    }
  },
  jumpPage(id, uri) {
    var cardId = this.$element(id).ref;
    router.push({ uri: uri, params : { ref : cardId } });
  }
}

/* xxx.css */
.container {
  flex-direction: column;
  align-items: center;
  background-color: #ABDAFF;
}
.item {
  height: 80px;
  background-color: #FAFAFA;
  margin-top: 2px;
}
.outer {
  width: 300px;
  height: 100px;
  align-items: flex-end;
  transition-effect: unfold;
}

<!-- target_page -->
<!-- xxx.hml -->
<div class="container">
    <div class="div">
        <text style="font-size: 30px">this is detail</text>
    </div>
</div>

/* xxx.css */
.container {
  flex-direction: column;
  align-items: center;
  background-color: #EBFFD7;
}
.div {
  height: 600px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

Page Transition Styles

Table 4 Page transition 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.
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.

Precautions for Page Transition

When you set a customized transition, set the background color of the page to an opaque color. Otherwise, the transition effect can be harsh.
The transition-enter and transition-exit parameters can be configured separately. The default parameters are used if they are not configured.
The default value is used if transition-duration is not configured.
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;
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.

seashell / docs

Transition Styles

Transition of Shared Elements

Precautions for Shared Elements

Sample Code

Card Transition

Example Code

Page Transition Styles

Precautions for Page Transition

简介

发行版

贡献者

近期动态

seashell / docs .gitee-modal { width: 500px !important; }

Transition Styles

Transition of Shared Elements

Precautions for Shared Elements

Sample Code

Card Transition

Example Code

Page Transition Styles

Precautions for Page Transition

简介

发行版

贡献者

近期动态

搜索帮助

seashell / docs