Javascript 可快速切换至屏幕的潜水器

我正在开发一个cordova应用程序，有3个“页面”。“页面”是具有固定高度的div和100%宽度的div。（参见图片中的div1、div2、div3）

我目前正在使用jquery的幻灯片显示和隐藏功能，但在手机上的性能非常差。所以我想到了使用css，我不知道如何制作is，这样你就可以滑动当前可见的div来捕捉下一个div

也许这张照片会让我的故事更清晰：

---

我希望有人能将我推向正确的方向，css和javascript方面。

您仍然应该使用jQuery Mobile来检测每个div上的左/右滑动事件，但是您应该为上一个/活动的/下一个div添加/删除类，而不是设置div位置的动画。类应该如下所示：

.container {
   position: absolute;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100vh;
   transition: all 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940); // this will add nice inertia effect upon switching DIVs
}

.container.previous {
    transform: translateX(-100%);
}
.container.active {
    transform: translateX(0%);
}
.container.next {
   transform: translateX(-100%);
}

---

你说的抓拍是指像一种轻松的方式吗？我相信“抓拍”作者的意思是下一个div fill在上一个div所在的位置停止滑动动画-而不是自由滚动（滑动）。请看下面我的答案。@aug更像是如果你将div2（见图）滑出屏幕超过一半，到右边，div1将滑到手机中央。@Artanis我想你明白我的意思了。：）这就是我需要的！！非常感谢你。我正在开发一个JSFIDLE示例，我将在几秒钟后发布它。外观和感觉都很好，也非常流畅-刚刚在用于移动性能测试的旧iPhone 3G上试用过：）