popState и анимация - pjax

у меня есть div, который выскальзывает из экрана, загружает новый контент и скользит обратно. Я использую jquery pjax, и эта часть отлично работает:

$('#menu a').on('click', function(event){

  event.preventDefault();

  var target = $(this).attr('href');

  $('li.current').removeClass("current");
  $(this).parent().addClass("current");

  $(content).transition({left:$(document).width()}, 900, 'out', function() {

    $.pjax({
      url: target,
      container: '#content',
      fragment: '#content',
      success: function(){
        $(content).transition({ left:'0px'}, 900, 'out');

        var contentHeight = $('#content').outerHeight(true)+258+$("#footer").outerHeight(true);

        if(contentHeight<parseInt($("body").css("min-height"))){
          contentHeight = "100%";
        }

        $(page).stop(true).animate({height:contentHeight}, 1000, "easeOutCubic");
      }
    });

  });

});

Но я не понимаю, как это работает, если используются кнопки браузера назад/вперед. Я пробовал разные вещи. Здесь я нашел хорошую статью, но не понимаю ее: http://artfindertech.wordpress.com/tag/historyapi/

Дело в том, что содержимое div меняется в тот момент, когда вы нажимаете кнопку «Назад» в браузере. Потом выходит, но не обратно. Также URL-адрес на секунду меняется на предыдущую страницу, но переходит на основной URL-адрес сайта. Вот моя пробная версия для popState:

$(window).on('pjax:popstate', function() {

  $(content).transition({left:$(document).width()}, 900, 'out', function() {

    $.pjax({
      container: '#content',
      fragment: '#content',
      success: function(){
        $(content).transition({ left:'0px'}, 900, 'out');

        var contentHeight = $('#content').outerHeight(true)+258+$("#footer").outerHeight(true);

        if(contentHeight<parseInt($("body").css("min-height"))){
          contentHeight = "100%";
        }

        $(page).stop(true).animate({height:contentHeight}, 2000, "easeOutCubic");
      }
    });

  });

});

popstate pjax
person MrGlasspoole    schedule 05.08.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я пытаюсь сделать то же самое прямо сейчас, то есть получить функциональность анимации в popstate. То, как я это вижу сейчас, это:

  1. on menu click call a function which will animate content and fill with the new content the container - 
    function animation(PageTitle,PageLink,check) {
    //check if it is a call from menu and if it is than
    //on animation and ajax complete call
    if (check) {
        setHistory(PageTitle,PageLink); // separate function to call it indimpendently
    }
}
  2. as set above, after animation finished call a function regarding window.history.pushState if is a call from menu links - 
    function setHistory(PageTitle,PageLink) {
    window.history.pushState({'ptitle':PageTitle,'plink':PageLink}, PageTitle, PageLink);
}
  3. after that set an onpopstatee function to call the function to the reverse animation and ajax - 
    window.onpopstate = function(event) {
    animation(event.state.ptitle,event.state.plink,false);
}

Я еще не тестировал это, но я реализую это прямо сейчас. Если это сработает, я обновлю это...

ОБНОВЛЕНИЕ:

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

person Kristijan    schedule 20.02.2014