如何将超链接延迟到 CSS 动画结束？

Question

我正在尝试让锚标记在 CSS 动画结束后立即重定向。我尝试在 jQuery 中捕获 href 并使用 'setTimeout' 在到达锚点位置之前造成延迟（这是之前线程中推荐的方法），但它一直没有工作。

$(document).ready(function() {

  $('.section').click(function() {

    var goTo = this.getAttribute("href"); //HOLDS HREF

    var $elementA = $('.section').bind('webkitAnimationEnd', function() //ANIMATION BEGIN
      {
        $(this).removeClass('clicked');
      });

    var $elementB = $('.section').bind('animationend', function() {
      $(this).removeClass('clicked');
    });

    $('.section').click(function() {
      $(this).addClass('clicked'); //ANMATION END
    });

    setTimeout(function() { //SUPPOSED TO DELAY LINK
      window.location = goTo;
    }, 300);
  });
});

a {
  overflow: hidden;
}

.section {
  background-color: teal;
  position: absolute;
  width: 200px;
  height: 200px;
  box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, .4);
}

.response {
  position: relative;
  top: 75px;
  left: 80px;
  width: 40px;
  height: 40px;
  border-radius: 500px;
  background-color: #f5f5f5;
  transition: .05s ease-out;
  opacity: 0;
}

.clicked {
  animation: event 1.4s;
}

.clicked > .response {
  animation: response 1.6s;
}

@keyframes event {
  0% {
    box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.4);
  }
  20% {
    box-shadow: 0px 9px 14px 0px rgba(50, 50, 50, 0.6);
  }
  100% {
    box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.4);
  }
}

@keyframes response {
  0% {}
  16% {
    opacity: .7;
  }
  32% {
    opacity: 0;
  }
  40% {
    opacity: 0;
    transform: scale(10);
  }
  100% {
    opacity: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="section">
  <div class="response"></div>
</a>

Answer 1

问题是因为请求被发送以立即加载新页面，因此当前的 UI 被立即卸载，几乎没有进一步更新。要解决此问题，您可以使用 preventDefault() 停止 link 的默认行为，然后在动画结束后手动请求下一页，如下所示：

$(document).ready(function() {
  $('.section').click(function(e) {
    e.preventDefault();
    var $a = $(this).addClass('clicked');
    setTimeout(function() {
      window.location.assign($a.attr('href'));
    }, 300);
  });
});

a {
  overflow: hidden;
}
.section {
  background-color: teal;
  position: absolute;
  width: 200px;
  height: 200px;
  box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, .4);
}
.response {
  position: relative;
  top: 75px;
  left: 80px;
  width: 40px;
  height: 40px;
  border-radius: 500px;
  background-color: #f5f5f5;
  transition: .05s ease-out;
  opacity: 0;
}
.clicked {
  animation: event 1.4s;
}
.clicked > .response {
  animation: response 1.6s;
}
@keyframes event {
  0% {
    box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.4);
  }
  20% {
    box-shadow: 0px 9px 14px 0px rgba(50, 50, 50, 0.6);
  }
  100% {
    box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.4);
  }
}
@keyframes response {
  0% {} 16% {
    opacity: .7;
  }
  32% {
    opacity: 0;
  }
  40% {
    opacity: 0;
    transform: scale(10);
  }
  100% {
    opacity: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://example.com" class="section">
  <div class="response"></div>
</a>

如何将超链接延迟到 CSS 动画结束？

How to delay a hyperlink until a CSS animation ends?

css

jquery

css-animations

jquery-animate