与屏幕对齐的可滑动div

Question

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

我目前正在使用jquery show和hide功能和幻灯片，但手机的性能非常糟糕。所以我想到了使用css，我无法了解如何制作，所以你可以刷一下当前可见的div来对下一个div进行捕捉。

也许这张照片会清楚我的故事：picture

我希望有人可以把我推向正确的方向css和javascript明智......

Answer 1

你仍然应该使用jQuery Mobile来检测每个div上的向左/向右滑动事件，但是不应为div的位置设置动画，你应该为之前的/ active / next 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%);
}