javascript 使用jQuery和CSS进行最小页面转换

Posted 2021-05-03

html { animation: fadeSiteIn .3s ease forwards; /* [1] */ }
html.fadeSiteOut { animation: fadeSiteOut .3s ease forwards; /* [2] */ }

@keyframes fadeSiteIn { /* [1] */
	from   { opacity: 0; }
	to    { opacity: 1; }
}

@keyframes fadeSiteOut { /* [2] */
    from   { opacity: 1; }
    to     { opacity: 0; }
}

//**MINIMAL PAGE TRANSITIONS WITH JQUERY & CSS
//https://blog.adam-marsden.co.uk/minimal-page-transitions-with-jquery-css-d97f692d5292

$(function() {
  $("a").each(function() { /* [1] */
    if ( location.hostname === this.hostname || !this.hostname.length ) { /* [1] */
      var link = $(this).attr("href"); /* [2] */
      if ( link.match("^#") ) { /* [3] */
        $(this).click(function() {
          var target = $(link); /* [4] */
          target = target.length ? target : $("[name=" + this.hash.slice(1) +"]"); /* [4] */
          if (target.length) {
            $("html,body").animate({ /* [5] */
                scrollTop: target.offset().top - 70 /* [5] */
            }, 1000); return false; /* [5] */
          }
        });
      } else if ( link.match("^mailto") ) { /* [6] */
          // Act as normal  /* [6] */
      } else {
        $(this).click(function(e) {
          e.preventDefault(); /* [7] */
          $("html").addClass("fadeSiteOut"); /* [8] */
          setTimeout(function() { /* [9] */
              window.location = link; /* [9] */
          }, 500); /* [9] */
        });
      }
    }
  });
});