Transitions — jQuery Mobile Demos
Платформа jQuery Mobile включает набор эффектов перехода на основе CSS, которые можно применять к любой ссылке на страницу или отправке формы с навигацией Ajax.
Переходы между страницами
исчезновение | диалог | страница |
|---|---|---|
поп | диалог | страница |
флип | диалог | страница |
поворот | диалог | страница |
поток | диалог | страница |
слайдер | диалог | страница |
слайд | диалог | страница |
слайд вверх | диалог | страница |
слайд вниз | диалог | страница |
нет | диалог | страница |
Важно: Некоторые платформы в настоящее время имеют проблемы с переходами.
Мы работаем над решением проблемы для всех. Если вы испытываете мерцание и мигание во время или в конце перехода, мы предлагаем следующий обходной путь. Обратите внимание, что этот обходной путь следует тщательно протестировать на целевой платформе перед развертыванием. Известно, что этот обходной путь вызывает проблемы с производительностью и сбои браузера на некоторых платформах, особенно на Android. Добавьте следующий код в свой пользовательский css:
.ui-page {-webkit-backface-visibility: скрыто; }
Видны только плавные переходы? Для просмотра всех типов переходов необходимо использовать браузер, поддерживающий 3D-преобразования. По умолчанию устройства, не поддерживающие 3D (например, Android 2.x), переключаются на «затухание» для всех типов перехода. Это поведение настраивается (см. ниже).
Переходы изначально были вдохновлены jQtouch С тех пор они были перестроены, но благодарю Дэвида Канеду и Джонатана Старка за первоначальное руководство.
Установка перехода
По умолчанию фреймворк применяет переход затухание . Чтобы установить собственный эффект перехода, добавьте к ссылке атрибут data-transition .
data-transition="pop" >Я взорвусь
При нажатии кнопки «Назад» платформа автоматически применит обратную версию перехода, которая использовалась для отображения страницы. Чтобы указать, что следует использовать обратную версию перехода, добавьте data-direction="reverse" атрибут ссылки.
Глобальная конфигурация
Установите глобальную опцию defaultPageTransition , если вы предпочитаете другой переход по умолчанию. Диалоги имеют другую опцию, называемую defaultDialogTransition , которую также можно настроить.
Поддержка браузеров
Все переходы построены с анимацией ключевых кадров CSS и включают -webkit правила префикса поставщика для браузеров iOS, Blackberry, Android, Safari и Chrome, -moz правила для браузеров Firefox и правила без префикса для Windows Phone 8 и IE10.
Поддержка анимации ключевых кадров и плавность перехода определяется версией браузера и аппаратным обеспечением, и если анимация не поддерживается, безопасно вернуться к отсутствию перехода. Чтобы заблаговременно исключить переход в ситуациях с низкой производительностью, мы исключаем браузеры, в которых отсутствуют 3D-преобразования, и предоставляем резервный переход, а также применяем максимальную ширину при применении переходов.
Резервный переход
По умолчанию для всех переходов, кроме затухания, требуется поддержка 3D-преобразования. Устройства, не поддерживающие 3D, вернутся к плавному переходу независимо от указанного перехода. Мы делаем это, чтобы заблаговременно исключить неэффективные платформы, такие как Android 2.x, из расширенных переходов и обеспечить бесперебойную работу. Обратите внимание, что существуют платформы, такие как Android 3.0, которые технически поддерживают 3D-преобразования, но все же имеют низкую производительность анимации, поэтому это не гарантирует, что каждый браузер будет на 100% без мерцания, но мы стараемся ответственно подойти к этому.
Запасной переход для браузеров, не поддерживающих 3D-преобразования, можно настроить для каждого типа перехода, но по умолчанию мы указываем «затухание» в качестве запасного. Например, это установит резервный переход для выдвижного перехода на «нет»:
$.mobile.transitionFallbacks.slideout = «none»
Максимальная прокрутка для переходов
По умолчанию переходы отключены (установлено значение «none»), когда вы либо переходите С, либо переходите НА страницу, где положение прокрутки в 3 раза превышает высоту экрана устройства.
Эта функция была добавлена из-за медленного времени отклика и возможности сбоя браузера при нажатии на элемент списка (или любой элемент навигации) далеко внизу длинной страницы, что приводит к
Браузер пытается анимировать очень большую страницу из положения прокрутки в верхнюю часть экрана. Положение прокрутки, а не общая высота экрана, является определяющим фактором производительности.
функция getMaxScrollForTransition .Максимальная ширина для переходов
По умолчанию переходы могут быть отключены (установлено значение «нет»), когда ширина окна больше определенной ширины в пикселях. Эта функция полезна, потому что переходы могут отвлекать или плохо работать на больших экранах. Это значение настраивается с помощью глобальной опции $.mobile.maxTransitionWidth , которая по умолчанию равна false . Опция принимает любое число, представляющее ширину пикселя или ложное значение . Если это не false , обработчик будет использовать переход «нет», когда окно шире указанного значения.
Переход на ту же страницу
Переходы на текущую активную страницу по умолчанию игнорируются, но их можно включить с помощью параметра allowSamePageTransition метода change() виджета pagecontainer .
Обратите внимание, что не все переходы будут работать должным образом и могут закончиться непрактичным результатом.
Создание пользовательских переходов
jQuery Mobile позволяет добавлять пользовательские переходы в словарь $.mobile.transitionHandlers , чтобы вы могли расширить выбор переходов на своем сайте или в приложении.
jQuery Mobile Transitions
« Предыдущая
Следующая глава »
jQuery Mobile включает эффекты CSS3 который позволяет вам выбрать способ открытия страницы.
jQuery Mobile имеет множество эффектов для перехода с одной страницы на другую.
Примечание: Для достижения эффекта перехода браузер должен поддерживать CSS3 3D Transforms:
| 12,0 | 10,0 | 16,0 | 4,0 | 15,0 |
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает
3D-преобразования.
Эффект перехода можно применить к любой ссылке или отправке формы с помощью атрибута перехода данных:
В таблице ниже показаны доступные переходы, которые можно использовать с атрибутом перехода данных как для страниц, так и для диалогов:
| Переход | Описание | Для страниц | Для диалогов |
|---|---|---|---|
| фейд | По умолчанию. Переход на следующую страницу | Попробуйте | Попробуйте |
| флип | Перелистывает следующую страницу с конца на начало | Попробуйте | Попробуйте |
| поток | Выбрасывает текущую страницу и открывает следующую | Попробуйте | Попробуй |
| поп | Переход на следующую страницу в виде всплывающего окна | Попробуйте | Попробуйте |
| слайд | Переход на следующую страницу справа налево | Попробуйте | Попробуйте |
| слайдер | Слайды справа налево и переход на следующую страницу | Попробуйте | Попробуй |
| слайд вверх | Слайды на следующую страницу снизу вверх | Попробуйте | Попробуйте |
| слайд вниз | Слайды на следующую страницу сверху вниз | Попробуйте | Попробуйте |
| очередь | Переход на следующую страницу | Попробуйте | Попробуйте |
| нет | Без эффекта перехода | Попробуйте | Попробуйте |
Эффект затухания по умолчанию используется для всех ссылок в jQuery Mobile (если браузер его поддерживает). |