popState and animations - pjax

Question

我有一个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");
      }
    });
  });
});

Answer 1

我现在正在尝试做同样的事情，即在opstate上获得动画功能。我现在的看法是：

1. 在菜单上单击调用一个函数，该函数将为内容设置动画并用新内容填充容器-

   函数动画（PageTitle、PageLink、check）{//检查是否是来自菜单的呼叫，以及是否超过//关于动画和ajax完整调用if（检查）{setHistory（PageTitle，PageLink）；//单独的函数独立调用}}

2. 如上所述，动画完成后，调用一个关于window.history.pushState的函数，如果是来自菜单链接的调用-

   函数集历史记录（PageTitle，PageLink）{window.history.pushState（｛'title'：页面标题，'link'：页面链接｝，页面标题，页面链接）；}

3. 之后设置一个onopstatee函数来调用该函数进行反向动画和ajax-

   window.onpopstate=函数（事件）{动画（event.state.pptitle、event.state.Prink、false）；}

我还没有测试它，但我现在正在实现它。如果它能工作，我会更新这个。。。

更新：

只是为了更新这一点，并告诉大家，正如我所推测的那样，它就像一种魅力。还有一件事，它可能与谁有关。。。我发现您必须在原始页面加载时调用history.replacestate，才能使用相对变量和动画返回到原始页面。