你怎么能延迟 <a> link 的加载，直到元素动画离开视口？

Question

我使用 :active 和 :hover 伪选择器设置了一些元素的样式，包括“按下按钮”类型的动画，它还会触发将元素滑出视口的动画。

我正在努力打造真正流畅的用户体验，并希望将超链接内容的加载延迟到这些动画完成后。

如何使用 HTML/CSS/JS 完成加载延迟？

Answer 1

使用 JavaScript setTimeout 函数延迟重定向。

例如，如果您有一个如下所示的 link，请在 link 上调用函数单击：

<a href="javascript:void" onclick="onBtnClickHandle()">Click Here</a>

创建一个JavaScript函数并使用setTimeout函数添加延迟：

  function onBtnClickHandle(){
    setTimeout(function(){ 
    window.location="https://www.google.com/"
 }, 3000);
}

您可以根据动画时间设置超时值。

演示：

  function onBtnClickHandle(){
        setTimeout(function(){ 
        window.location="https://www.google.com/"
     }, 3000);
    }

<a href="javascript:void" onclick="onBtnClickHandle()">Click Here</a>

How can you delay an <a> link from loading until after the element animates out of the viewport?