Задержка перед переходом по ссылке

165
27 мая 2019, 21:10

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

Answer 1
const onLoad = (e) => {
  e.preventDefault();
  setTimeout(() => window.location.replace(e.target.href), 1000)
}
<a href="/page" onClick="onLoad" />
Answer 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>

READ ALSO
Стилизация ошибки required
HTML

Стилизация ошибки required

Сейчас при ошибке вылетает вот такое окно

 148
Border css на половину круга
HTML

Border css на половину круга

Ребят,как сделать чтобы было из этого:

 184
Добавления в таблицу class через javascript
HTML

Добавления в таблицу class через javascript

Как добавить элементу <table> класс, через Javascript?

 137
Градиент закругленного бордюра кнопки
HTML

Градиент закругленного бордюра кнопки

Как сделать градиент закругленного бордюра кнопки с прозрачным содержимым?

 143