#page2 {display: none;
-webkit-transition: .5s;
transition: .5s;
}
#page2.fadeOut { opacity: .3;
-webkit-transform: translate(0,-100%);
transform: translate(0,-100%);
}
js:
page1.addEventListener("touchstart" ,function(event){
page1.style.display ="none";
page2.style.display ="block";
page3.style.display ="block";
page3.style.top = "100%";
setTimeout(function(){
page2.setAttribute("class","page fadeOut");
page3.setAttribute("class","page fadeIn");
},5500);
},false);
page3css代码写没
#page3{
display: none;
-webkit-transition:.5s;
-o-transition:.5s;
transition:.5s;
}
/*第3页出现效果*/
#page3.fadeIn{
-webkit-transform:translate(0,-100%);
-o-transform:translate(0,-100%);
transform:translate(0,-100%);
}