javascript - 在链接点击时向 添加类并添加延迟重定向(淡出页面)

Question

我正在尝试添加页面转换。淡入过渡是使用 WebFont Loader 和 CSS 动画完成的。我想要的是在链接点击时向 html 标签添加一个类并等待 1 秒(对于 CSS fadeOut 动画)，然后重定向到链接。

这是 this jQuery code 的修改版本:

$(document).ready(function() {

  $("a").click(function(event){
    event.preventDefault();
    redirectLink = this.href;
    $("body").fadeOut(1000, redirectToLink);      
  });

  function redirectToLink() {
    window.location = redirectLink;
  }
});

我已经对其进行了自定义，但我认为 .delay(1000, redirectToLink) 存在问题并且无法正常工作。我对 JS 了解不多，所以非常感谢您的帮助。

$(document).ready(function() {


  $("a").click(function(event){
    event.preventDefault();
    redirectLink = this.href;
    $("html").addClass('wf-next').removeClass('wf-active wf-inactive wf-loading').delay(1000, redirectToLink);      
  });

  function redirectToLink() {
    window.location = redirectLink;
  }
});

Answer 1

.delay() 旨在与动画一起使用，但您已将动画移动到 css 过渡。我会像这样使用 setTimeout:

  $(document).ready(function() {

    $("a").click(function(event){
      event.preventDefault();
      redirectLink = this.href;
      $("html").addClass('wf-next').removeClass('wf-active wf-inactive wf-loading');
      setTimeout(function(){
        redirectToLink(redirectLink);
      }, 1000);
    });

    function redirectToLink(url) {
      window.location = url;
    }
  });