Así que estoy codificando este sitio web y quiero que se desvanezca antes de que cambie a otro sitio web que vinculé a toda la página. Y cuando finalmente está en el sitio web, se desvanece.
¿Alguien sabe el código de esto?
Puede tener una animación css para su desvanecimiento y luego usar setTimeout() en js para retrasar el proceso y navegar a una nueva página a través de js después de que finalice la animación (en lugar de la etiqueta <a> )
function navigate(){ const element = document.querySelector('.otherWebsite'); element.classList.add('animation'); // setting the animation class to the element setTimeout(() =>{ location.assign('https://stackoverflow.com') } , 3000) // delaying the process of the navigation for 3s (3000ms) } .otherWebsite{ padding: 10px; background-color: green; color: #fff; } .animation{ animation: fadeout 3s linear 1 forwards; } @keyframes fadeout { from{ opacity: 1; } to{ opacity: 0; } } <div class="otherWebsite" onclick="navigate()">Click here</div> Nota: También puede hacer que la función js sea flexible para múltiples etiquetas usando data-href o su conjunto de datos preferido
document.querySelectorAll('[data-href]').forEach(element =>{ // looping though all tags with 'data-href' in the page // setting an onclick event listener for the element element.onclick = () =>{ element.classList.add('animation') // setting animation class to element const link = element.dataset.href || element.getAttribute('data-href'); // getting the link from the 'data-href' attribute setTimeout(() => location.assign(link) , 3000) // navigate to a new website after 3s (3000ms) } }) .otherWebsite{ padding: 10px; background-color: green; color: #fff; margin: 10px 0px; } .animation{ animation: fadeout 3s linear 1 forwards; } @keyframes fadeout { from{ opacity: 1; } to{ opacity: 0; } } <div class="otherWebsite" data-href="https://stackoverflow.com">Website (stackoverflow)</div> <div class="otherWebsite" data-href="https://google.com">Website 2 (google)</div>