做这个是因为工作需要，老板要做一个app功能的演示，为了更贴切，页面的切换效果和app一样，从右边进入，从右边划出。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
[v-cloak]{
display: none;
}
#app{
width: 200px;
height:200px;
overflow: hidden;
text-align: center;
position: relative;
}
.home-page{
width: 100%;
height: 100%;
background: green;
}
.page{
width: 100%;
height: 100%;
background: #ccc;
}
.in{
position: absolute;
top: 0;
left: 0;
}
.out{
position: absolute;
top: 0;
left: 100%;
}
.show{
position: absolute;
top: 0;
left: 0;
animation:mymove 0.5s;
-webkit-animation:mymove 0.5s; /*Safari and Chrome*/
}
@keyframes mymove
{
from {left:100%;}
to {left:0;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:100%;}
to {left:0;}
}
.hide{
position: absolute;
top: 0;
left: 100%;
animation:myleave 0.5s;
-webkit-animation:myleave 0.5s; /*Safari and Chrome*/
}
@keyframes myleave
{
from {left:0;}
to {left:100%;}
}
@-webkit-keyframes myleave /*Safari and Chrome*/
{
from {left:0;}
to {left:100%;}
}
</style>
</head>
<body >
<div id="app" v-cloak>
<div class="home-page" id="0">
<button @click="nextPage(1)">下一页</button>
</div>
<div class="page" :class="myclass" id="1">
<span>11111</span>
<button @click="nextPage(2)">下一页</button>
<button @click="lastPage(1)">上一页</button>
</div>
<div class="page" id="2">
<span>22222</span>
<button @click="nextPage(3)">下一页</button>
<button @click="lastPage(2)">上一页</button>
</div>
<div class="page" id="3">
<span>33333</span>
<button @click="nextPage(4)">下一页</button>
<button @click="lastPage(3)">上一页</button>
</div>
<div class="page" id="4">
<span>44444</span>
<button @click="nextPage(5)">下一页</button>
<button @click="lastPage(4)">上一页</button>
</div>
<div class="home-page" id="5">
<button @click="lastPage(5)">上一页</button>
</div>
</div>
<script src="../js/lib/vue-2.26.min.js"></script>
<script src="../js/lib/jquery.min.v2.1.4.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
pageShow:0,
myclass:""
},
created:function () {
},
computed:{
myclass:function(){
}
},
mounted:function () {
},
methods: {
nextPage:function(index){
$("#"+index).removeClass("out hide").addClass("in show");
},
lastPage:function(index){
$("#"+index).removeClass("in show").addClass("out hide");
}
}
});
</script>
</body>
</html>
