javascript - ハイパーリンクのクリックで 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>

これを行う方法はありますか？