在Web应用程序中滑动页面 [英] slide a page in web application
本文介绍了在Web应用程序中滑动页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想向左/向右滑动一个动画页面。 （就像iphone应用程序）
I want to slide left/right a page with some animation. (Just like iphone apps)
<body>
<div id="page1">
<!-- Full screen content with a button at bottom, on click I want to show #page2 but with slide animation. #page1 will slide-out left and #page2 will slide-in from right-->
</div>
<div id="page2">
<!-- Full screen content with a button at bottom, on click It will show page1 with slide animation -->
</div>
</body>
推荐答案
假设你有一个selected页面和每个页面的页面类，请尝试以下行：
Assuming you have a "selected" class for the selected page and a "page" class for every page, try something along these lines:
.page {
position:absolute;
left:100%;
-moz-transition:1s left;
-o-transition:1s left;
-webkit-transition:1s left;
transition:1s left;
}
.page.selected {
left: 0;
}
这将适用于Webkit，Firefox 4和Opera ），并且会在不支持的浏览器上正常降级（它们将在一个步骤中从开始到结束）。
This will work on Webkit, Firefox 4 and Opera (don't remember version) and will degrade gracefully on non-supporting browsers (they'll just go from start to end in one step).
这篇关于在Web应用程序中滑动页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
