使用 JavaScript 让页面滑入？答案

【问题标题】：Use JavaScript to have pages slide in?使用 JavaScript 让页面滑入？
【发布时间】：2013-06-29 21:50:16
【问题描述】：

我正在创建一个基于网络的移动应用程序并寻找一种在页面之间滑动的方法。

目前，我已将所有页面（即 div）设置为绝对页面，并将它们完全放在彼此之上。一次只能看到一个页面，当用户单击一个按钮时，它会隐藏当前页面并将按钮目标页面的可见性设置为 true。

我需要页面滑动，就像 iOS 和其他移动平台一样。使用 jQuery Mobile 对我来说不是一个选项（我正在自己创建一个框架）。

如果有人能告诉我如何让页面滑入而不是立即剪切和显示，我将不胜感激。

谢谢

【问题讨论】：

【解决方案1】：

您可以使用 css 过渡来为 div 的位置设置动画，例如

.page {
    position: absolute;
    transition: left 1s;
    left: 100%;
}
.page.in {
    left: 0
}

另见：http://jsfiddle.net/jkDUm/ 它可能无法显示您正在寻找的确切效果，但它展示了这个想法......

【讨论】：

谢谢！我将如何处理大量页面？单击新页面等时，我应该怎么做才能重置它们？谢谢
我们的想法是恰好有一页带有 in 类。要更改页面，您需要将其从当前页面中移除，然后将其添加到应该可见的页面中。
如果你想在过渡完成后做一些工作，你可以监听过渡结束事件。 stackoverflow.com/questions/2794148/css3-transition-events/…
谢谢朋友，感谢您的回答。