页面淡入淡出 in/out 动画不适用于 javascript:history.back()

Question

我有一个脚本，允许每个页面在离开页面时淡出，并在选择另一个页面的 href 时淡入。但是，当使用 javascript:history.back() 到 return 到上一页时，动画仍然是整页，导致无法访问页面内容。我将 post 我的代码.. 任何帮助将不胜感激:)

     #fader {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  pointer-events: none;                                                            background:linear-gradient(-45deg, rgb(233, 233, 233), rgb.(226,225, 225), rgb(253, 253, 253), rgb(216, 214, 214));
animation-duration: 700ms;
animation-timing-function: ease-in-out;
-webkit-animation: Gradient 700ms; 
-moz-animation: Gradient 700ms; 
animation: Gradient 700ms;
}

@-webkit-keyframes Gradient {
0% {
    background-position: 0% 50%
}
50% {
    background-position: 100% 50%
}
100% {
    background-position: 0% 50%
}
}

@-moz-keyframes Gradient {
0% {
    background-position: 0% 50%
}
50% {
    background-position: 100% 50%
}
100% {
    background-position: 0% 50%
}
}

@keyframes Gradient {
0% {
    background-position: 0% 50%
}
50% {
    background-position: 100% 50%
}
    100% {
    background-position: 0% 50%
    }
  }

  #fader:before {
  content: 'fade'
  }

  @keyframes fade-out {
  from { opacity: 1 }
  to { opacity: 0 }
   }

    @keyframes fade-in {
    from { opacity: 0 }
    to { opacity: 1 }
     }

     #fader.fade-out {
     opacity: 0;
     animation-name: fade-out;
     }

      #fader.fade-in {
      opacity: 1;
      animation-name: fade-in;
      }



 <script>
            function fadeInPage() {
              if (!window.AnimationEvent) { return; }
              var fader = document.getElementById('fader');
              fader.classList.add('fade-out');
            }

            document.addEventListener('DOMContentLoaded', function() {
              if (!window.AnimationEvent) { return }

              var anchors = document.getElementsByTagName('a');

              for (var idx=0; idx<anchors.length; idx+=1) {
                if (anchors[idx].hostname !== window.location.hostname) {
                  return;
                }

                anchors[idx].addEventListener('click', function(event) {
                  var fader = document.getElementById('fader'),
                      anchor = event.currentTarget;

                  var listener = function() {
                    window.location = anchor.href;
                    fader.removeEventListener('animationend', listener);
                  };
                  fader.addEventListener('animationend', listener);

                  event.preventDefault();
                  fader.classList.add('fade-in');
                });
              }
            });

            window.addEventListener('pageshow', function (event) {
              if (!event.persisted) {
                return;
              }
              var fader = document.getElementById('fader');
              fader.classList.remove('fade-in');
            });
          </script>
        </head>

        <body>
          <svg id="fader"></svg>
          <script>
              fadeInPage();
          </script>
          <p>content</p>
          </body>

Answer 1

你的问题有点令人困惑，但这对我有用。我希望这就是您正在寻找的。

function fadeInPage() {
  if (!window.AnimationEvent) {
    return;
  }
  var fader = document.getElementById("fader");
  fader.classList.add("fade-out");
}

document.addEventListener("DOMContentLoaded", function() {
  if (!window.AnimationEvent) {
    return;
  }

  var anchors = document.getElementsByTagName("a");

  for (var idx = 0; idx < anchors.length; idx += 1) {
    if (anchors[idx].hostname !== window.location.hostname) {
      return;
    }

    anchors[idx].addEventListener("click", function(event) {
      var fader = document.getElementById("fader"),
        anchor = event.currentTarget;

      var listener = function() {
        window.location = anchor.href;
        fader.removeEventListener("animationend", listener);
      };
      fader.addEventListener("animationend", listener);

      event.preventDefault();
      fader.classList.add("fade-in");
    });
  }
});

window.addEventListener("pageshow", function(event) {
  if (!event.persisted) {
    return;
  }
  var fader = document.getElementById("fader");
  fader.classList.remove("fade-in");
});

fadeInPage();

#fader {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  pointer-events: none;
  background: linear-gradient( -45deg, rgb(233, 233, 233), rgb(226, 225, 225), rgb(253, 253, 253), rgb(216, 214, 214));
  animation-duration: 700ms;
  animation-timing-function: ease-in-out;
  -webkit-animation: Gradient 700ms;
  -moz-animation: Gradient 700ms;
  animation: Gradient 700ms;
}

@-webkit-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@-moz-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#fader:before {
  content: "fade";
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#fader.fade-out {
  opacity: 0;
  animation-name: fade-out;
}

#fader.fade-in {
  opacity: 1;
  animation-name: fade-in;
}

<svg id="fader"></svg>
<p>content</p>
<a href="http://www.google.com">Google</a>

页面淡入淡出 in/out 动画不适用于 javascript:history.back()

Page fade in/out animation not working with javascript:history.back()

javascript

css

fade