Вызвать функцию Javascript при щелчке по гиперссылке и дождаться завершения анимации?

Question

У меня есть анимация перехода на страницу, которую я использую с css. Он полагается на изменение класса контейнера для запуска css-анимации. Я ищу способ активировать эту анимацию (добавив класс в контейнер), затем дождаться ее завершения, а затем перейти по ссылке в href. Вот JSFiddle.

       <div class="navigationbar">
            <a href="home.html">
                <h2 class="logo">The Lowdown.</h2>
            </a>    
            <ul>
                <li><a href="text.html">CONTACT US</a></li>
                <li><a href="edition.html">EDITIONS</a></li>
                <li><a href="articles.html">ARTICLES</a></li>
                <li><a href="#aboutus">ABOUT US</a></li>
                <li><a class="active" href="https:/google.com">HOME</a></li>
                
              </ul>
        </div>

        
<div class="loader loader--active">
    <div class="loader__icon">
    </div>
    <div class="loader__tile"></div>
    <div class="loader__tile"></div>
    <div class="loader__tile"></div>
    <div class="loader__tile"></div>
    <div class="loader__tile"></div>
    <div class="loader__tile"></div>
  </div>

Есть какой-либо способ сделать это?

Answer 1

Можете ли вы попробовать решение ниже, если оно вам подходит?

var el = document;
//el.onclick = showFoo;

$(document).ready(function(){
$(".jqLink").on("click",function(event){
var myRef=this;
console.log("ref=>",$(myRef).attr("href"));
showFoo(event);
setTimeout(function(){

 $loader.classList.remove('loader--active');
 
 setTimeout(function(){
 window.location.href=$(myRef).attr("href");
 },1000);
},2000);
});

})

function showFoo(e) {
  $loader.classList.add('loader--active');
  return e.preventDefault();
}

var $loader = document.querySelector('.loader')

window.onload = function() {
  $loader.classList.remove('loader--active')
};

  window.setTimeout(function () {
    $loader.classList.remove('loader--active')
  }, 2000)

Добавьте класс css "jqLink" к каждому элементу, как показано ниже.

 <li><a href="text.html" class="jqLink">CONTACT US</a></li>
  <li><a href="edition.html" class="jqLink">EDITIONS</a></li>
  <li><a href="articles.html" class="jqLink">ARTICLES</a></li>
  <li><a href="#aboutus" class="jqLink">ABOUT US</a></li>
  <li><a class="active" href="https:/google.com" class="jqLink">HOME</a></li>

Попробуйте это, если вам это подходит.