在过渡效果发生之前加载页面

Question

我终于在我的 Foundation 5 网站上完成了 PJAX 的所有设置和完美运行，是时候添加我的页面过渡了。出于某种原因，无论我尝试什么页面加载，然后发生过渡。

这是我的网站，其中包含我尝试过的过渡之一

我也尝试了简单的事情，例如：

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

我在搜索解决方案时也遇到了 aenism.com/teleportation-is-scary/，以及我目前在我的页面上运行的解决方案。

这是它工作的示例：演示站点

我不确定此时的问题可能是什么。

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

呜 这个建议奏效了，必须对其进行一些调整以使其适合我的页面过渡，但这就是我最终得到的（适用于 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");
});