提交 8348c6f9 编写于 作者: Z zhangchunyan

add new transition tests

Signed-off-by: Nzhangchunyan <zhangchunyan22@huawei.com>

 On branch master
上级 447fd830
......@@ -48,10 +48,8 @@ PageA跳转到PageB,跳转的共享元素为image, shareid为“shareImage
<div>
<list>
<list-item type="description">
<div>
<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>
</div>
<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>
......@@ -237,3 +235,145 @@ export default {
b. back场景下:退出页面栈的Page2.js应用transition-enter描述的动画配置,并进行倒播;从页面栈第二位置进入栈顶位置的Page1.js应用transition-exit描述的动画配置,并进行倒播。
![zh-cn_image_0000001238184345](figures/zh-cn_image_0000001238184345.png)
### 示例
Page1有一个不透明盒子,点击盒子会跳转到Page2,当点击Page2中的盒子,会回退到Page1页面。
1. Page1
```
<!-- xxx.hml -->
<div class="container">
<text>index</text>
<div class="move_page" onclick="jump"></div>
</div>
```
```
<!-- xxx.js -->
import router from '@system.router';
export default {
data: {
},
jump() {
router.push({
uri:'pages/transition2/transition2'
})
}
}
```
```
<!-- xxx.css -->
.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
```
<!-- xxx.hml -->
<div class="container">
<text>transition</text>
<div class="move_page" onclick="jumpBack"></div>
</div
```
```
<!-- xxx.js -->
import router from '@system.router';
export default {
data: {
},
jumpBack() {
router.back()
}
}
```
```
<!-- xxx.css -->
.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)
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册