頁面加載之前轉換效果發生

Question

我終於得到了PJAX所有設置和完美的基金會5網站和它的時間來添加我的頁面轉換。出於某種原因，無論我嘗試加載頁面，然後發生轉換。

Here is my website with with one of the transitions I tried

我也試着像簡單的事情：

$(document) 
    .on('pjax:start', function() { $('#main').fadeOut(200); }) 
    .on('pjax:end', function() { $('#main').fadeIn(200); }) 

我也跑進aenism.com/teleportation-is-scary/在我搜索的解決方案和我目前已經在我的網頁上運行。

這裏是它的工作的例子：Demo Site

我不知道這個問題可能是在這一點上有什麼。

Answer 1

我發現了一個完美的淡出和回來的解決方案。我沒有用其他動畫測試過它，但它看起來應該是訣竅。我希望這可以幫助別人！

 // USER CLICKS LINK WITH PJAX CLASS 
    $('body').delegate('a.pjax', 'click', function() { 
    // CONTENT FADE OUT TRANSITION BEGINS 
    $('#main-content').fadeOut(300, function() { 
     // CALLBACK TO RUN PJAX AFTER FADEOUT 
     $.pjax({ 
      url: target, 
      container: '#main-content', 
      fragment: '#main-content' 
     }) 
    }) 
    // STOP THE LINK FROM WORKING NORMALLY 
    return false; 
    }) 

    // PJAX DOIN THANGS TO THE CONTENT FRAGMENT IDENTIFIED ABOVE 
    $('#main-content') 
    .on('pjax:start', function() { 
     // KEEPING THE MAIN CONTENT HIDDEN 
     $(this).fadeOut(0) 
    }) 
    .on('pjax:end', function() { 
     // FADE IN THE MAIN CONTENT 
     $(this).fadeIn(300) 
     // FUNCTIONS LOADED AGAIN AFTER PJAX ENDS GO HERE 
    }) 

Answer 2

WOOO這一建議的工作，不得不調整它一堆得到它適合我的頁面轉換，但是這是我結束了（工作過CSS3動畫）：

$("body").delegate('a[data-pjax]', 'click', function(event) { 
    var target = $(this).attr("href"); 
    if (contentpage == "true" || errorpage == "true") { $(".contentimage").append('<div class="pjax-loading"></div>'); } 
    $("body").removeClass("pjax-fadeIn").addClass("pjax-fadeOut").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ 
     $.pjax({url: target, container: '#content', fragment: '#content'}); 
    }); 
    return false; 
}) 

$("#content").on('pjax:start', function() { 
    $("body").removeClass("pjax-fadeOut").addClass("pjax-hide"); 
}).on('pjax:complete', function() { 
    $("body").removeClass("pjax-hide").addClass("pjax-fadeIn"); 
});