Web production note

　【更新日 : 】

【脱Jquery】CSS Gridでスライド系アニメーション（slideDown、slideUp、slideToggle）を実装する

Category：
css / js
Tags：
, , , , ,

アクセシビリティに対応したCSS GridとVanilla JSでスライド系アニメーション（slideDown、slideUp、slideToggle）を実装したサンプルです。

※iPhoneはiOS16以上から動作します。

JavaScriptのみでトグルアニメーションを実装したサンプルは以下をご参照ください。

【脱Jquery】javascriptでスライド系アニメーション（slideDown、slideUp、slideToggle）を実装する

【脱Jquery】javascriptでスライド系アニメーション（slideDown、slideUp、slideToggle）を実装する

Vanilla JSでスライド系アニメーション（slideDown、slideUp、slideToggle）を実装したサンプルです。イージング編集と、コールバック関数に対応させまし…

detailsとsummaryタグでトグルアニメーションを実装したサンプルは以下をご参照ください。

detailsとsummaryタグでスライド系アニメーション（slideDown、slideUp、slideToggle）を実装する

detailsとsummaryタグでスライド系アニメーション（slideDown、slideUp、slideToggle）を実装する

アクセシビリティ対策が簡単にできるdetailsとsummaryタグでスライド系アニメーション（slideDown、slideUp、slideToggle）を実装したサンプルです。…

動作サンプル

codepen

See the Pen slideDown slideUp slideToggle Vanilla JS (Web Animations API) by web_corder (@web_walking_nak) on CodePen.

HTML

<button type="button" id="toggle-button-1" class="js-toggle__button" aria-expanded="false" aria-controls="toggle-1">
  開閉ボタン
</button>

<div class="js-toggle__panel" id="toggle-1" role="region" aria-hidden="true" aria-labelledby="toggle-button-1">
  開閉パネルのコンテンツ
</div>

開閉ボタンの設定

  • id="任意のID" を追加。
  • class="js-toggle__button" を追加。
  • aria-expanded="false" を追加。
  • aria-controls="開閉パネルのID" を追加。

開閉パネルの設定

  • class="js-toggle__panel" を追加。
  • id="任意のid" を追加。
  • aria-hidden="true" を追加。
  • aria-labelledby="開閉ボタンのID" を追加。

CSS

アニメーションに関係するsyle

イージングは環境に合わせて適宜調整してください。

.js-toggle__panel {
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows 0.6s cubic-bezier(.16, 1, .3, 1);
}
.js-toggle__panel[aria-hidden="false"] {
  grid-template-rows: minmax(0, 1fr);
}

ボタンの表示切り替えに関係するstyle

aria-expanded属性の値で判別できます。

/* パネルが開いている時 */
.js-toggle__button[aria-expanded="true"] {
}

/* パネルが閉じている時 */
.js-toggle__button[aria-expanded="false"] {
}

JS

//【アクセシビリティ対応あり】CSS gridで実装する開閉アニメーション
function cssGridToggle() {
  const toggleButtons = document.querySelectorAll('.js-toggle__button');
  //対象が存在しない場合は終了
  if(toggleButtons.length === 0) {
    return;
  }

  //真偽値を文字列で返す
  function getBooleanString(boolean) {
    return boolean.toString();
  }
  
  toggleButtons.forEach(toggleButton => {
    //開閉パネルを取得
    const targetPanelId = toggleButton.getAttribute('aria-controls');
    const targetPanel = document.getElementById(targetPanelId);
    //開閉パネルが存在しない場合はイベントを設定しない
    if(!targetPanel) {
      return;
    }
    toggleButton.addEventListener('click', function() {
      //パネルが開いているかどうかチェック
      const isOpen = targetPanel.getAttribute('aria-hidden') === 'false';
      //アクセシビリティ対応・表示を切り替え
      toggleButton.setAttribute('aria-expanded',getBooleanString(!isOpen));
      targetPanel.setAttribute('aria-hidden',getBooleanString(isOpen));
    });
  });
}

関数の呼び出し

任意の場所で以下を実行し関数を呼び出してください。

cssGridToggle();

参考リンク