Question

我想用一些动画向左/向右滑动页面。（就像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>

Answer 1

假设您为所选页面设置了“选定”类，并为每个页面设置了“页面”类，请尝试以下几行：

.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（不记得版本），并且会在不支持的浏览器上优雅地降级（它们只会在一步中从头到尾）。

Answer 2

jQuery对于动画HTML元素非常有用。

This is a good tutorial关于使用jQuery滑动的各种不同方法：

此外，您可能希望查看某种旋转木马插件，并查看它们的工作原理，因为它们与您想要的东西非常相似：

在Web应用程序中滑动页面

2 个答案: