1

我有一个 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 的内容会在您单击浏览器后退按钮的那一刻发生变化。然后它滑出但不回来。此外，网址会在一秒钟内更改为上一页，但会跳转到网站的主网址。这是我对 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");
      }
    });

  });

});
4

1 回答 1

1

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

  1. 在菜单上单击调用一个函数，该函数将为内容设置动画并填充容器的新内容 - 
    功能动画（PageTitle，PageLink，检查）{
    //检查是否是来自菜单的调用，如果不是
    //关于动画和ajax完成调用
    如果（检查）{
        setHistory(PageTitle,PageLink); // 单独的函数来独立调用它
    }
}
  2. 如上所述，动画完成后，如果是来自菜单链接的调用，则调用有关 window.history.pushState 的函数 - 
    功能 setHistory(PageTitle,PageLink) {
    window.history.pushState({'ptitle':PageTitle,'plink':PageLink}, PageTitle, PageLink);
}
  3. 之后设置一个 onpopstatee 函数来调用该函数到反向动画和 ajax - 
    window.onpopstate = 函数（事件）{
    动画(event.state.ptitle,event.state.plink,false);
}

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

更新：

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

于 2014-02-20T18:01:04.477 回答