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

回答

相關問題