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
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
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. 5+
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
Whether a component on the current page displays the transition effect during a card transition. Available values are as follows: |
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
Related to @keyframes, which supports transform and transparent animations. For details, see Table 2. |
|||
Related to @keyframes, which supports transform and transparent animations. For details, see Table 2. |
|||
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:
-
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;
-
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.
-