Статьи

HTML-слайд страницы без рамки

Ноябрь 6, 2018

Я работаю над небольшим демонстрационным мобильным приложением для предстоящего проекта, и я хотел добавить скользящие переходы между страницами. Довольно просто, правда? Вы просто используете jQuery, jQuery Mobile, zepto или один из множества других фреймворков, и они обрабатывают это для вас. Я не хотел Частью моей цели в этом конкретном проекте является попытка заставить себя работать без фреймворка, чтобы я мог видеть, как все это работает вручную. Кроме того, я хотел, чтобы HTML был как можно более тонким и простым

Поиск в Google был очень мал, за исключением микро-решения для перехода по страницам от FASW . Мне это нравится, но он все еще использует чужую работу, и мне не нравилось добавлять даже небольшую часть HTML-лжи, которая ему нужна.

Итак, я покатился самостоятельно.

Решение, которое я придумал, на самом деле довольно легкое и работает на основе небольшого AJAX , некоторых переходов CSS и событий переходов CSS . Также важно отметить, что это работает только с WebKit. (Мой личный случай использования для мобильного приложения с PhoneGap для Android и iOS, поэтому мне нужна только совместимость с WebKit.)

Первым делом нужно настроить CSS тела для перехода, поэтому, когда я перемещаю его, он анимируется.

body{
   position: relative;
   -webkit-transition: left .2s ease;
}

Затем я запускаю функцию при загрузке страницы, чтобы заменить все ссылки на функцию, которая создаст эффект. Я использую некоторые приемы, которые я узнал из замечательной статьи « От jQuery до JavaScript: Справочник», чтобы справиться с этими операциями без jQuery.

document.addEventListener('DOMContentLoaded', function() {
  replaceLinks();
});

function replaceLinks(){
   var links = document.querySelectorAll('a');

   for (i=0; i<links.length; i++){
      var link = links[i];
      link.addEventListener("click",replacePage, false);
   }

}

Следующим шагом является использование AJAX для получения связанной страницы.

event.preventDefault();
var href= this.href;

var ajax = new XMLHttpRequest();
ajax.open("GET",href,true);
ajax.send();

Теперь наступают переходы. Что мне нужно сделать, чтобы выполнить этот слайд страницы:

  1. Сдвиньте страницу с экрана влево.
  2. Мгновенно переместить страницу вправо за пределы экрана
  3. Заменить содержимое тела новым содержимым
  4. Сдвиньте страницу на экран справа.

Я должен сделать это в таком порядке. Если вы заменяете содержимое независимо от анимации, вы получаете странные эффекты, такие как изменение страницы, а затем происходит анимация, которая выглядит неожиданно. Или вы получаете противоположное, происходит переход, затем содержимое меняется. Выглядит некрасиво Пытаться вовремя это оказалось проблематичным. Лучше всего подождать, пока произойдет переход за пределы экрана, затем изменить содержимое, а затем переместить его обратно на экран. Я смог сделать это с помощью события перехода.

В принципе, насколько я могу судить, существует только одно событие перехода «transitionEnd» независимо от производителя браузера. Я не смог понять это. Анимационные события выглядят одинаково ограниченными. Вот как я это сделал:

Я переместил тело на левую сторону экрана.

body.style.left = "-100%";

Есть слушатель событий, который делает его прозрачным, когда я перемещаю его на другую сторону экрана.

body.addEventListener( 'webkitTransitionEnd', moveToRight, false);

function moveToRight(event){
   var body = document.querySelector('body');
   body.removeEventListener( 'webkitTransitionEnd', moveToRight, false);
   body.addEventListener( 'webkitTransitionEnd', returnToCenter, false);
   body.style.opacity = 0;
   body.style.left = "100%"
}

Затем я заменяю содержимое, снова делаю его видимым, корректирую историю браузера и перемещаю его обратно в центр.

function returnToCenter(event){
   var body = document.querySelector('body');
   body.removeEventListener( 'webkitTransitionEnd', returnToCenter, false);
   body.innerHTML = bodyContent;
   history.pushState(null, null, href);
   body.style.opacity = 1;
   body.style.left = 0;
   replaceLinks();
}

Затем, чтобы быть тщательным, я проверяю, чтобы я изменил процесс, если пользователь нажмет кнопку «Назад».

window.addEventListener("popstate", handleBackButton);

function handleBackButton(e) {

   var ajaxBack = new XMLHttpRequest();
   ajaxBack.open("GET",location.pathname,true);
   ajaxBack.send();

   ajaxBack.onreadystatechange=function(){
      var bodyBack = document.querySelector('body');
      var bodyBackContent = grabBody(ajaxBack.responseText, "body");
      bodyBack.addEventListener( 'webkitTransitionEnd', moveToLeft, false);
      bodyBack.style.left = "100%";

      function backToCenter(event){
         var body = document.querySelector('body');
         body.removeEventListener( 'webkitTransitionEnd', backToCenter, false);
         body.innerHTML = bodyBackContent;
         body.style.opacity = 1;
         body.style.left = 0;
         replaceLinks();
      }

      function moveToLeft(event){
         var body = document.querySelector('body');
         body.removeEventListener( 'webkitTransitionEnd', moveToLeft, false);
         body.addEventListener( 'webkitTransitionEnd', backToCenter, false);
         body.style.opacity = 0;
         body.style.left = "-100%"
      }
   }
}

Это лучший способ сделать это? Понятия не имею. Но это работает для меня, и я не мог найти аналогичное решение через Google.

Здесь есть демоверсия (только для браузеров WebKit)

Полный исходный код доступен через github .

34
Share: