概要
cssとjsで overflow:hiddenの要素を上下に開閉アニメーションします。
動作の流れ
- 同じ要素をhiddenでクローン作成
- 高さを取得
- 取得した高さを
max-heightとして設定 - cssの
transitionでイイ感じにアニメーション
ソースコード
example.html
<!DOCTYPE html><body><divclass="card"><divclass="card-body">コンテンツ
</div><divclass="card-detail-btn"><!-- 開閉ボタン --><divclass="card-detail-btn__arrow-box"><iclass="fas fa-caret-down"></i></div></div></div></body></html>example.css
.card-body{max-height:100px;overflow-x:auto;overflow-y:hidden;transition:all.1sease-in-out;}.card-detail-btn{position:absolute;height:20px;width:100%;bottom:-10px;color:#888;background-color:#ccc;box-shadow:0px-5px10px0px#fff;transition:all.1sease-in-out;}.card-detail-btn:hover{color:#ccc;background-color:#888;}.card-detail-btn__arrow-box{text-align:center;font-size:1.5em;cursor:pointer;}example.js
$(".card-detail-btn").on('click',function(){const$card=$(this).closest('.card');const$cardBody=$card.find('.card-body');if(!$card.hasClass("opened")){$card.addClass("opened")applyOriginalHeight($cardBody)}else{$card.removeClass("opened")$cardBody.removeAttr('style');}})/**
* オリジナルの高さでstyleを適用する
*
* @param {jQuery} $elem
*/constapplyOriginalHeight=function($elem){// クローンする要素に設定するcssconstcss={'position':'absolute','visibility':'hidden','height':'auto','max-height':'initial',}// 被りがないようにランダム化constrandomString=Math.random().toString(32).substring(2);// クローン作成$elem.clone().css(css).addClass('calcurate-height'+randomString).appendTo('body');// クローンからオリジナルの高さを取得constnewHeight=$(".calcurate-height"+randomString).height();$(".calcurate-height"+randomString).remove();// max-heightを設定。css transitonでアニメーションする$elem.css('max-height',newHeight+'px');}