javascript - 可滑动到屏幕的 div

Question

我正在开发一个包含 3 个“页面”的 cordova 应用程序。 “页面”是具有固定高度和 100% 的 div。 (见图中的div1、div2、div3)

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

也许这张照片会澄清我的故事:picture

我希望有人能将我推向正确的方向 css 和 javascript wise..

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%);
}