1

Вообщем есть событие load, которое после полной загрузки страницы делает плавное opacity body,html с 0 до 1, вопрос в том что-бы сделать каждый клик по любой ссылке с такой-же задержкой для выполнения. То есть что-бы по клику переход осуществлялся не сразу, а после срабатывания opacity в обратном порядке с 1 до 0 и только потом переход

2 ответа 2

3
const onLoad = (e) => {
  e.preventDefault();

  setTimeout(() => window.location.replace(e.target.href), 1000)
}

<a href="/page" onClick="onLoad" />
2

План действий такой:

  1. Заглушить стандартный клик;
  2. Проиграть анимацию;
  3. По завершении анимации перейти по нужному адресу через window.location.

window.onload = function() {
  var body = document.querySelector('body');
  var links = document.querySelectorAll('a');  
  
  links.forEach(function (link) {
    link.addEventListener('click', onLinkClicked);
    
    function onLinkClicked(event) {
      event.preventDefault();
      body.classList.remove('animated-show-active')
      setTimeout(onAnimationComplete, 2000);
    }

    function onAnimationComplete() {
      window.location = link.href;  
    }
  });
}
.animated-show {
  opacity: 0;
  transition: opacity 2s ease-out;
}
.animated-show.animated-show-active {
  opacity: 1;
}
<body class="animated-show animated-show-active">
  <a href="#">Click</a>
</body>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.