Есть ли легкая альтернатива jQuery Mobile для просто переходов страницы?
Я ищу структуру ULTRA-light или фрагмент кода, который обрабатывает переходы страницы -webkit
css аналогично JQM или JQTouch. Они работают нормально, но я не хочу добавлять почти 200 килобайт ресурсов, чтобы получить некоторые переходы.
Мне бы хотелось:
1 Переключение между страницами (div) внутри одного HTML-документа.
2 Сделайте переключение "flip" и, возможно, "слайд".
Кто-нибудь видел такую вещь?
Изменить: я хотел бы избежать использования jQuery все вместе.
Ответы
Ответ 1
Обновить, нашел это:
http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/
Похоже, что этот парень смог (почти) извлечь JQM-переходы в автономный script..
Вдохновленный этим, я написал этот script, который переворачивается между страницами: http://jsfiddle.net/AAfek/47
Use document.querySelector or querySelectorAll instead of using document.all.tags
Работает с удовольствием для моих целей.
Ответ 2
Отъезд https://github.com/dgileadi/zepto-page-transitions - отличный, отличный материал!
Ответ 3
PageSlider.js - это чрезвычайно легкий мини-диск, который обрабатывает переходы страниц в одностраничных приложениях.
Это сделал сотрудник Adobe Christophe Coenraets, и он довольно тщательно протестирован
https://github.com/ccoenraets/PageSlider
Ответ 4
Вот вы: https://github.com/linslin/pagingSlider новый плагин слайдера страницы на основе Christophe Coenraets - поставляется с некоторыми функциями, такими как:
- Пейджинг с pagingSlider
- default pageSlider actions
- броузера
- Totaly plugable, как pageSlider
- если вы хотите, pagemenu переключиться непосредственно на страницу
КВ
Ответ 5
U может проверить легкий флип jquery страницы:
http://tympanus.net/codrops/2010/12/14/moleskine-notebook/
Они включили несколько изображений с помощью script, и вы можете избежать их получения еще меньшего размера.
Я предполагаю, что это эффект, который вы ищете, используя преобразования CSS -webkit:
эффект flip с анимацией webkit
Ответ 6
На самом деле нет необходимости иметь JS-инфраструктуру для использования переходов/анимаций CSS3. Посмотрите здесь коллекцию отличных анимаций/переходов: https://daneden.me/animate/
Все, что вам нужно для активации такого перехода, это что-то вроде:
$('#yourPAgeContainingElement').addClass('animated bounceOutLeft');