Question

我已经写了以下内容来创建页面之间的淡入/淡出过渡。在我的本地设置中，页面平滑加载，但beforeunload上没有任何退出动画，这显然是非常刺耳的。

我已经创建了一个快速演示我目前在JSFiddle上使用的内容：https://jsfiddle.net/6r605auw/

这甚至是处理此问题的最佳方法吗？如果您对beforeunload动画似乎失败的原因有任何建议，或者您有更好的方法，那么我很乐意听到它们。

jQuery(document).ready( function($){
  $('body').css('display, none');
  $('body').fadeIn(1000);
});

$(window).on('beforeunload', function() {
  $('body').fadeOut(1000);
});

Answer 1

您可以尝试将History API与pushState和popState一起使用 - 以便无缝地从一个页面移动到另一个页面。你正在做的事情很糟糕，而你所犯的错误会随着你在页面中添加更多元素而更加明显当JS开始（并且DOM已准备好等）已经太晚来执行hide()或.css({display: "none"})因为页面正在构建并且可见。你最终会看到一个丑陋的华丽不稳定的网站/应用程序:(
“其他”解决方案是最初使用CSS隐藏 ...但搜索引擎会因此而惩罚您。

使用叠加层

更好方式是拥有固定的全尺寸CSS可见叠加元素 -

<div id="loaderOverlay"></div>

覆盖整个页面内容 - 而JS - （+ CSS3） fadeOut 代替该元素（通过添加类似的CSS类）

#loaderOverlay{
    position: fixed;
    z-index: 99999;
    top:0; left:0; right:0; bottom:0;
    background: #fff;
    transition: 2s;       /* transition timing */
}
#loaderOverlay.hide{      /* JS-add this class on DOM ready or window load */
   visibility: hidden;
   opacity: 0;
}

在jQuery中触发“fadeOut”看起来像：

$(window).on("load", function(){
   // The overlay is initially visible, we need to hide it!
   $("#loaderOverlay").addClass("hide"); // CSS3 will animate it nicely
});

现在，淡入淡出问题......

**beforeunload** event将在页面资源即将卸载时启动卸载可以持续几毫秒（+等待HTTP请求...），显然没有足够的时间来发生2s的动画 - 这是我认为合适的唯一方式是定位页面上的所有链接，获取href属性，阻止浏览器导航 - 仅导航transitionend（不受支持）或2100ms {{3 }}：

// When we click on some link we want our overlay to show up!
// Additionally instead of `"a"` you could make sure it's not an external link,
// a #hash anchor etc...

$(document).on("click", "a", function(evt) {

  evt.preventDefault(); // Don't navigate!

  var href = $(this).attr("href"); // grab the href

  // Animate-In our overlay
  $("#loaderOverlay").removeClass("hide");

  // wait for CSS3 to animate-in the overlay and than navigate to our next page

  setTimeout(function() {
     window.location = href; // Navigate finally
  }, 2100);

});

正如您可以看到上述链接的作品，但很明显浏览器的后退按钮不是您网页中的链接，为此...递归到我的答案的开头。

淡入/淡出页面之间的过渡

1 个答案:

使用叠加层