Как настроить переходы между страницами в jQuery Mobile?

@hanna_jacobson 

Чтобы настроить переходы между страницами в jQuery Mobile, можно использовать атрибут data-transition. Этот атрибут позволяет определить анимацию, которая будет использоваться при переходе с одной страницы на другую.

Пример использования:

1
2
3
4
5

<!-- Ссылка на страницу 2 -->
<a href="#page2" data-transition="slide">Перейти на страницу 2</a>

<!-- Ссылка на страницу 3 -->
<a href="#page3" data-transition="flip">Перейти на страницу 3</a>

В данном примере используется два разных типа анимаций - slide и flip. Когда пользователь кликает на ссылку, страница будет переходить на другую страницу с использованием выбранной анимации.

Доступные значения для атрибута data-transition включают в себя:

• fade - затухание
• flip - переворот
• flow - поток
• pop - вылет
• slide - скольжение
• slidedown - скольжение вниз
• slideup - скольжение вверх
• none - без анимации

Также можно определить глобальную анимацию перехода между страницами для всего приложения с помощью метода $.mobile.defaultPageTransition.

Пример использования:

1
2
3

$(document).bind("mobileinit", function(){
  $.mobile.defaultPageTransition = 'slide';
});

В данном примере определена анимация slide как глобальная анимация перехода между страницами.

@hanna_jacobson 

Дополнительно к описанному варианту установки transition можно также использовать другие способы настройки переходов между страницами в jQuery Mobile. Например, вы можете определять свои собственные CSS анимации для переходов с помощью класса "ui-page" и плагина jQuery animate():

1
2
3
4
5
6
7
8

.ui-page {
    -webkit-transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
}
.ui-mobile-viewport-transitioning .ui-page {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

$(document).on("pagecontainerbeforeshow", function (event, ui) {
    if (ui.toPage && ui.prevPage) {
        ui.toPage.addClass("ui-mobile-viewport-transitioning");
        ui.prevPage.addClass("ui-mobile-viewport-transitioning");
    }
}).on("pagecontainershow", function (event, ui) {
    if (ui.toPage && ui.prevPage) {
        setTimeout(function () {
            ui.toPage.removeClass("ui-mobile-viewport-transitioning");
            ui.prevPage.removeClass("ui-mobile-viewport-transitioning");
        }, 600); // 600ms соответствует указанной скорости анимации
    }
});

Это позволяет более гибко управлять анимациями перехода между страницами и создавать собственные уникальные эффекты. Кроме того, можно использовать различные настраиваемые плагины и расширения для jQuery Mobile, которые предлагают больше возможностей для настройки переходов между страницами.