#javascript #json #fadein #fade
#язык JavaScript #json #увядание #увядать
Вопрос:
Итак, я кодирую этот веб-сайт, и я хочу, чтобы он сделал то, что я хочу, прежде чем он перейдет на другой веб-сайт, на который я ссылался на всю страницу, исчезнет. И когда это, наконец, появляется на веб-сайте, оно исчезает.
Кто-нибудь знает код к этому?
Комментарии:
1. Это довольно сложно сделать хорошо, так как вы не знаете, сколько времени потребуется для загрузки связанного веб-сайта, пока это не будет сделано. Чтобы приблизить его к заданному времени анимации, вы могли бы что-то сделать с помощью setTimeout()
2. Пожалуйста, предоставьте достаточно кода, чтобы другие могли лучше понять или воспроизвести проблему.
Ответ №1:
Вы можете использовать css-анимацию для своего затухания, а затем использовать setTimeout() в js, чтобы отложить процесс и перейти на новую страницу через js после завершения анимации (вместо lt;agt; тега).
function navigate(){ const element = document.querySelector('.otherWebsite'); element.classList.add('animation'); // setting the animation class to the element setTimeout(() =gt;{ 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; } } lt;div class="otherWebsite" onclick="navigate()"gt;Click herelt;/divgt; Примечание. Вы также можете сделать функцию js гибкой для нескольких тегов с использованием data-href или предпочтительного набора данных
document.querySelectorAll('[data-href]').forEach(element =gt;{ // looping though all tags with 'data-href' in the page // setting an onclick event listener for the element element.onclick = () =gt;{ 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(() =gt; 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; } } lt;div class="otherWebsite" data-href="https://stackoverflow.com"gt;Website (stackoverflow)lt;/divgt; lt;div class="otherWebsite" data-href="https://google.com"gt;Website 2 (google)lt;/divgt;