我想用一些动画向左/向右滑动页面。 (就像 iphone 应用程序一样)
<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”类和一个用于每个页面的“page”类，请按照以下几行尝试:
.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(不记得版本)，并且将在不支持的浏览器上正常降级(它们只会一步从头到尾)。
关于javascript - 在 Web 应用程序中滑动页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5274462/