popState和动画 - pjax

我有一个div滑出屏幕，加载新内容并滑回。使用jQuery pjax而该部分的伟大工程：popState和动画 - 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"); 
     } 
    }); 

    }); 

});

来源

2012-08-05 MrGlasspoole

我试图做同样的事情，现在即获得动画功能onpopstate。我看它现在的方式是：

点击呼叫，将动画内容，并与新的内容填充容器的功能 -

 
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 
    } 
}

如上设置，动画成品调用函数后关于window.history.pushState如果是从菜单链接呼叫 -

 
function setHistory(PageTitle,PageLink) { 
    window.history.pushState({'ptitle':PageTitle,'plink':PageLink}, PageTitle, PageLink); 
}

后设置onpopstatee功能的函数调用反向动画和Ajax -

 
window.onpopstate = function(event) { 
    animation(event.state.ptitle,event.state.plink,false); 
}

我还没有测试过，但我正在执行它。如果将工作我会更新这个...

UPDATE：

只是为了更新这个问题，并告诉它就像一个魅力，我认为。还有一件事，对于它可能引起关注......我发现你必须在原始页面加载时调用一个history.replacestate，以便有可能用相对变量和动画回到原始页面。

来源

2014-02-20 18:01:04 Kristijan

popState和动画 - pjax

回答

相关问题