【更新日 : 】
【脱Jquery】CSS Gridでスライド系アニメーション（slideDown、slideUp、slideToggle）を実装する
- Category：
- css / js
- Tags：
- JavaScript, Vanilla JS, アニメーション, スライド, 脱Jquery, 自作関数
アクセシビリティに対応したCSS GridとVanilla JSでスライド系アニメーション（slideDown、slideUp、slideToggle）を実装したサンプルです。
※iPhoneはiOS16以上から動作します。
JavaScriptのみでトグルアニメーションを実装したサンプルは以下をご参照ください。
detailsとsummaryタグでトグルアニメーションを実装したサンプルは以下をご参照ください。
動作サンプル
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();