Подтвердить что ты не робот

Есть ли легкая альтернатива jQuery Mobile для просто переходов страницы?

Я ищу структуру ULTRA-light или фрагмент кода, который обрабатывает переходы страницы -webkit css аналогично JQM или JQTouch. Они работают нормально, но я не хочу добавлять почти 200 килобайт ресурсов, чтобы получить некоторые переходы.

Мне бы хотелось:

1 Переключение между страницами (div) внутри одного HTML-документа.

2 Сделайте переключение "flip" и, возможно, "слайд".

Кто-нибудь видел такую ​​вещь?

Изменить: я хотел бы избежать использования jQuery все вместе.

4b9b3361

Ответ 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

Работает с удовольствием для моих целей.

Ответ 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');