Question

我终于在我的Foundation 5网站上完成了PJAX的所有设置和完美工作，并且有时间添加我的页面转换。出于某种原因，无论我尝试什么页面加载，然后转换发生。

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");
});

转换效果发生前的页面加载

2 个答案: