How can you delay an <a> link from loading until after the element animates out of the viewpor-CodePudding

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.

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

CodePudding user response：

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>

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.

Demo:

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

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