よくあるナビゲーションでボタンを押すとなんらかのアニメーションをしてからページを移動するみたいな、そんなサンプルを紹介します。

今回のサンプルでは、「ナビ開閉ボタン」を押すとページ移動のナビゲーションがアニメーションで現れ、リンクを選択すると点滅、さらにナビゲーションが閉じてからやっとページ遷移を行います。

動作サンプルページ

実際のサンプルはこちら。

HTML

<article id="sample01">
  <h2>サンプル01</h2>

  <button id="sample01-toggle-btn" class="close">ナビ開閉ボタン</button>

  <div id="sample01-toggle">
    <h3>押すと点滅してページ遷移するボタン</h3>
    
    <ol id="button-list">
      <li><a href="http://www.google.co.jp/">サンプルボタン01</a></li>
      <li><a href="http://www.yahoo.co.jp/">サンプルボタン02</a></li>
      <li><a href="http://www.google.co.jp/">サンプルボタン03</a></li>
      <li><a href="http://www.yahoo.co.jp/">サンプルボタン04</a></li>
      <li><a href="http://www.google.co.jp/">サンプルボタン05</a></li>
    </ol>
  </div>
</article>

CSS

#sample01 {
  overflow: hidden;
}

#sample01-toggle {
  width: 50%;
  padding: 10px;
  background: #eeeeee;
  transform: translateX(-100%);
  transition: all .25s ease;
}

#sample01-toggle.open {
  transform: translateX(0);
}

#sample01-toggle.close {
  transform: translateX(-100%);
}

.flashing {
  animation: flashAni .25s ease 0s 3 normal;
}

@keyframes flashAni {
  0% {
    color: red;
  }
  100% {
    color: yellow;
  }
}

JavaScript

/* Back Forward Cache対策 */
window.onpageshow = function(event) {

  // bfcacehが残っている場合、リロードして値をリセット
  if (event.persisted) {
    window.location.reload();
  }
};


// アニメーションするナビのボックスとその開閉ボタンを取得し、変数へ代入
var naviBox = document.getElementById('sample01-toggle');
var toggleBtn = document.getElementById('sample01-toggle-btn');


// ナビ開閉ボタンの処理
toggleBtn.onclick = function() {

  // 押下時のボタンクラスを取得
  var btnClass = this.getAttribute('class');

  // ボタンのクラスで条件分岐させる処理
  // ボタンのクラスが'open'じゃない場合の処理、ボタンリストがスライドイン
  if( btnClass !== 'open' ) {
    this.className = 'open';
    naviBox.className = 'open';
  }

  // ボタンのクラスが'open'だった場合の処理、ボタンリストがスライドアウト
  else {
    this.className = 'close';
    naviBox.className = 'close';
  }
};


// アニメーションする要素を全て取得し、変数へ代入
var btns = document.querySelectorAll('#button-list a');

// 取得した要素（配列）をループ処理でイベントを付与する
for ( i=0; i<btns.length; i++ ) {

  // イベントを付与
  btns[i].onclick = function() {

    // アニメーションさせたい要素へアニメーションするクラスを付与
    this.classList.add('flashing');

    // アニメーションが終了した後の処理（'animationend'はCSSアニメーションの場合）
    this.addEventListener('animationend', function() {

      // ボタンのアニメーションが終了したら、'open'クラスを'close'へ戻す
      toggleBtn.className = 'close';
      naviBox.className = 'close';

      // 何かする（今回はページ遷移）
      // ボタンのhref属性の値を取得し、ページ遷移させる
      window.location = this.getAttribute('href');

    }, false);

    // aを押下しても遷移させない
    return false;
  };
}