在超链接上调用Javascript函数并等待动画完成？

我有一个页面转换动画，我正在使用css。它依赖于更改容器的类来启动css动画。我正在寻找一种方法来激活这个动画（通过将类添加到容器中），然后等待它完成，然后转到href的链接。这是你的电话号码

如果下面的解决方案对你有效，你能试试吗

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)

向每个元素添加“jqLink”css类，如下所示

 <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>

---

试试这个，如果它对你有效。

如果它对你有效，你能试试下面的解决方案吗

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)

向每个元素添加“jqLink”css类，如下所示

 <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>

试试这个，如果它对你有用的话