问题描述
我用 :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>这篇关于你怎么能延迟一个<a>从加载到元素动画出视口之后的链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！