title: Delay anchor link destination till animation completes?
body: <p>I am trying to make a page transition occurs with vanilla JS and CSS. I have a class that I wish to add to my element when the 'collection' button is clicked. I have a function where I delay the link redirection by using prevent default, adding a CSS animated class, and then setting a new window location after a delay of 4 seconds. However currently when I click on collections, nothing happens, although when I hover over the text, the link preview is correct. I'm using animate.css's built-in animation which just requires you to link its stylesheet in the head tag and add the animation class to the element.</p>
  <p>HTML -</p>
  <pre><code>&lt;div id=&quot;homeContainer&quot; class=&quot;home-container&quot;&gt;
           &lt;div class=&quot;bg-home bg-move&quot;&gt;
              &lt;img src=&quot;/Home/Asset 3.png&quot; alt=&quot;film&quot;&gt;
           &lt;/div&gt;
           &lt;div class=&quot;nav-button-h text-fade&quot;&gt;
              &lt;p id=&quot;pressbtn&quot;&gt;ABOUT&lt;/p&gt;
              &lt;p id=&quot;logo-center&quot;&gt;SHEK LEUNG&lt;/p&gt;
              &lt;p id=&quot;aboutbtn&quot;&gt;PRESS&lt;/p&gt;
           &lt;/div&gt;
           &lt;div class=&quot;nav-button-v text-fade&quot;&gt;
              &lt;a href=&quot;/collections/MA/MA.html&quot; class=&quot;text-fade&quot; id=&quot;colbtn&quot;&gt;COLLECTIONS&lt;/a&gt;
              &lt;p id=&quot;projbtn&quot;&gt;PROJECTS&lt;/p&gt;
           &lt;/div&gt;
       &lt;/div&gt;
  </code></pre>
  <p>JS</p>
  <pre><code>const colbtn = document.getElementById('colbtn');
  const homeContainer = document.getElementById('homeContainer');
  
  colbtn.addEventListener('click', animateDown);
  
  function animateDown(e) {
     e.preventDefault();
     homeContainer.classList.add('animate__animated animate__fadeOutDown');
     if (this.href) {
        var target = this.href;
     }
     setTimeout(function () {
        window.location.replace(target);
     }, 4000);
  
  }
  </code></pre>