fancydom.js

(function () {
  var body = document.getElementsByTagName('body')[0];
  body.addEventListener('animationend', handleAnimEnd);
  var path = '';

  // fade in on dom load
  (function (fn) {
    if (document.readyState != 'loading') {
      fn();
    } else {
      document.addEventListener('DOMContentLoaded', fn);
    }
  })(fadeIn);

  function fadeIn () {
    body.classList.add('fancydom-in');
  }   

  // fade out page on anchor click
  window.onclick = function(e) {
    e.preventDefault();

    var target = e.target;
    var node = target.nodeName;

    function navigate (target) {
      var currLoc = window.location.href;
      path = target.href;
      var lastChar = path.slice(-1);

      // check if href goes anywhere
      if (lastChar !== '#' && path !== currLoc) {
        body.classList.remove('fancydom-in');
        body.classList.add('fancydom-out');
      }
    }

    if (node === 'A') {
      navigate(target);
    } else if (node = 'IMG' && target.parentNode.nodeName === 'A') {
      navigate(target.parentNode);
    }
  }

  function handleAnimEnd (e) {
    var anim = e.animationName;
    
    // when the fade out is finished, update href
    if (anim === 'fadeOut') {
      window.location.href = path;
    }
  }
})();