你怎么能延迟一个<a>从加载到元素动画出视口之后的链接?

2022-01-19 00:00:00 frontend javascript html css

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

I styled some elements with :active and :hover pseudo-selectors, including a "button press" type animation that also triggers animations that slide the elements out of the viewport.

我正在尝试制作一个非常流畅的用户体验，并希望将超链接内容的加载延迟到这些动画完成之后.

I'm trying to make a really smooth UX and want to delay the hyperlinked content from loading until after these animations finish.

如何使用 HTML/CSS/JS 实现这种加载延迟?

How can you accomplish this load delay with HTML/CSS/JS?

推荐答案

使用 JavaScript setTimeout 函数来延迟你的重定向.

Use the JavaScript setTimeout function to delay your redirect.

例如，如果您有如下链接，则在链接点击时调用该函数:

For example, if you have a link as below, call the function on link click:

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

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

Create a JavaScript function and add the delay using the setTimeout function:

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

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

You can set the timeout value as per your animation timing.

演示:

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

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

相关文章