极客观点
项目管理
HarmonyOS
具体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
*{box-sizing: border-box;margin: 0;padding: 0;}
html,body,.pages{height: 100%;}
.pages{position: relative;overflow: hidden;}
.page0,.page1{position: absolute;width: 100%;height: 100%;}
.page0{background-color: darkgray;}
.page1{background-color: lavender;}
.btn{font-size: 24px;position: absolute;top: 50%;border: 1px solid;padding: 0 1em;}
/*设置过度，把第2个放到第二页*/
.page0,.page1{transition: transform 1000ms;}
.page1{transform: translate3d(0,100%,0);}
/*有个animation的图片（图片才会的问题）*/
.chunk1{width: 50%;background-color: #000000;position: absolute;top: 30%;right: 0;}
.chunk1{animation: move 500ms alternate infinite both;}
@keyframes move{
from{transform: translate(0,0);}
to{transform: translate(100px,0);}
/*写百分比有时会无效，ios的bug*/
}
</style>
</head>
<body>
<div class="pages">
<div class="page0">
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" class="chunk1"/>
</div>
<div class="page1">
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" class="chunk1"/>
</div>
<span class="btn">点击下一个</span>
</div>
<script type="text/javascript">
document.getElementsByClassName('pages')[0].addEventListener('touchmove',function(e){
e.preventDefault();
});
var page0 = document.getElementsByClassName('page0')[0],
page1 = document.getElementsByClassName('page1')[0];
function next(){
//动画过程屏幕外的page的动画快是不见的，动画结束后才看到快出现
page0.style.transform = 'translate(0,-100%)';
page1.style.transform = 'translate(0,0%)';
}
document.getElementsByClassName('btn')[0].addEventListener('click',function(){
next();
});
</script>
</body>
</html>点按钮可以发现谷歌浏览器模拟是可以的，但在ios微信上，发现得到过度动画结束的时候才突然看到带animation的图片出现。
ios上请全部加个兼容 -webkit-transform前缀试试，js也是WebkitTransform