Diseñé algunos elementos con pseudoselectores :active y :hover, incluida una animación de tipo "pulsar botón" que también desencadena animaciones que deslizan los elementos fuera de la ventana gráfica.
Estoy tratando de hacer una UX realmente fluida y quiero retrasar la carga del contenido con hipervínculos hasta que finalicen estas animaciones.
¿Cómo puede lograr este retraso de carga con HTML/CSS/JS?
Use la función JavaScript setTimeout para retrasar su redirección.
Por ejemplo, si tiene un enlace como el siguiente, llame a la función al hacer clic en el enlace:
<a href="javascript:void" onclick="onBtnClickHandle()">Click Here</a> Cree una función de JavaScript y agregue el retraso usando la función setTimeout :
function onBtnClickHandle(){ setTimeout(function(){ window.location="https://www.google.com/" }, 3000); }Puede establecer el valor de tiempo de espera según el tiempo de su animación.
Manifestación:
function onBtnClickHandle(){ setTimeout(function(){ window.location="https://www.google.com/" }, 3000); } <a href="javascript:void" onclick="onBtnClickHandle()">Click Here</a>