swipeable divs, которые привязаны к экрану

Question

Я разрабатываю приложение cordova с 3 страницами. «Страницы» - это divs с фиксированной высотой и 100%. (см. div1, div2, div3 на картинке)

В настоящее время я использую jquery show и скрываю функции с помощью слайда, но производительность на мобильных телефонах очень плохая. Поэтому я подумал о том, чтобы использовать css, я не могу понять, как это сделать, чтобы вы могли прокрутить текущий видимый div, чтобы привязать следующий div на месте.

Может быть, эта картина Виль очистить мою историю до: picture

Я надеюсь, что кто-то может толкать меня в правильном направлении, 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%); 
}