Transition exit page

Keyframes animation before page unload

by LĂ©o Durand

HTML

<svg id="fader"></svg>
    <script>fadeInPage()</script>
    <a id="link" class="link-transition" href="example.html">Click me!</a>

CSS

#fader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999999;
        pointer-events: none;
        opacity:0;
        background: black;
        animation-duration: 500ms;
        animation-timing-function: ease-in-out;
      }


      @keyframes pageFade-in {
        from {
          opacity: 0
        }

        to {
          opacity: 1
        }
      }
   

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

      @keyframes translateY-in {
        from {
          margin-top: -20px;
        }

        to {
          margin-top: 0px;
        }
      }

JavaScript

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


  var anchors = document.getElementsByClassName("link-transition");

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

    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('pageFade-in');
    });
  }
});