使用網址對頁面加載的過渡效果

Question

這段代碼重定向到example-page.php：

setTimeout(function() {
  window.location.href = "/example-page.php";
}, 5000);

我正在嘗試添加過渡效果，因此當它重定向時，看起來好像是在頁面上向左或向右滾動到另一個。 任何幫助將不勝感激！ 我已經嘗試過使用Jquery，但是我仍然很新而且很掙扎。

Answer 1

您可以嘗試這樣的事情：

var elements = document.getElementsByTagName('body');
setTimeout(function(){
 elements[0].style.opacity = 1;
    (function fade(){
        var opacloader = parseFloat(elements[0].style.opacity);

        (elements[0].style.opacity = opacloader - .1)<0.1?window.location.href='example':setTimeout(fade,40)})();
},4800);

這里基本上發生的是：

4.8秒后，實際頁面的正文逐漸淡出。 （如果需要，可以添加其他效果。）當實際頁面的正文不透明度為0時，將發生重定向。

在下一頁上，您可以執行fadeIn效果，該效果可能接近您的預期

在這里演示

---

要在下一頁上淡入主體，可以使用以下方法：

var elements = document.getElementsByTagName('body');
elements[0].style.opacity = 0;
(function fadeIn() {

        var opacity = parseFloat(elements[0].style.opacity);

        if (opacity == 1) return;

        elements[0].style.opacity = opacity + 0.1;
        setTimeout(fadeIn, 100); //<<<<<<<< here you set the speed!
    })();

示范淡入

Answer 2

 (function(){ document.body.classList.add("fadeout"); window.setTimeout(function(){ window.location.href = "http://www.newlocation.com"; },5000) })() 

 body{ transition:opacity 5000ms; opacity:1; } body.fadeout{ opacity:0; } 

Answer 3

您應該將過渡效果放在登錄頁面（example-page.php）中。

例如，您可以使用css規則#wrapper{display:none}隱藏整個身體，並使用jquery滑動顯示它

 $(document).ready(function () {
      $('#wrapper').slideToggle(1000);