如何将<a>链接从加载延迟到元素从视口中以动画形式显示之后？

Question

我用:active和:hover伪选择器样式化了一些元素，包括"button button "键入animation，也会触发将元素滑出视窗的动画。

我想做一个真正流畅的用户体验，并希望延迟超链接的内容从加载，直到这些动画完成后。

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

Answer 1

使用JavaScriptsetTimeout函数延迟重定向。

例如，如果你有一个链接如下，调用链接点击函数:

<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>