可滑动div捕捉到屏幕

Question

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

我目前正在使用带有幻灯片的jquery显示和隐藏功能，但是在手机上的性能非常差。 所以我想到了使用CSS，但我不知道该如何制作，因此您可以滑动当前可见的div来将下一个div固定在适当的位置。

也许这张照片会把我的故事讲清楚： 图片

我希望有人可以将我推向正确的方向，例如CSS和javascript。

Answer 1

您仍应使用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%);
}