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

【问题标题】：Page loading before transition effects happen在过渡效果发生之前加载页面
【发布时间】：2026-02-23 09:45:01
【问题描述】：

我终于在我的 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

目前我不确定问题出在哪里。

【问题讨论】：

你有非工作代码的演示吗？

标签： css-transitions zurb-foundation transitions pjax

【解决方案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
    })

【讨论】：

【解决方案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");
});

【讨论】：