grid使ったらheight:autoのトランジションのアコーディオンできんで。

はじめに

いつもお世話になってるコリスさんのこの記事みて、
久しぶりにテンションが上がったので早速やってみた。

Web制作者の念願がついに叶った！ height: 0;からheight: auto;へのトランジションをJavaScriptは無し、CSSで実装する方法

ひと昔前は表示要素が可変な場合、min-heightを使ってしのいでたから懐かしみ。
（できるだけjs使わない派のワイ）

結論からいうとgrid使って0fr → 1frする。

main.html

<div class="box">
  <div>Hover me!</div>
  <div class="body">
    <div>
      <p></p>
    </div>
  </div>
</div>

index.css

.body {
  display: grid; 
  grid-template-rows: 0fr;
  transition: 250ms grid-template-rows ease;
  > div {
    overflow: hidden;
  }
}
 
.box:hover .body {
  grid-template-rows: 1fr;
} 

仕組み

.bodyをgirdにして、.boxをホバーした時に.bodyが閉じたり開いたりする感じ。

気づいたこと。

.boxいらないんじゃね？

.bodyにhoverつけたら要素の高さが0になるのでhoverしにくい。

ホバーじゃなくてボタンにしたい！

ボタンにしたい場合はcheckboxと +（兄弟要素） 使えばできる。
※detailsでやってみたけどdisplayの表示・非表示には対応してなかった。

ポイント

みそは.body直下のdivにoverflow: hiddenいれてるところ。
.bodyに直接入れたいところやけど、後々デザイン入れる過程でpaddingとか入れたりする。
padding入れると　padding分の高さ出ちゃうねん。（高さ0にならない）

最後に

管理画面設計していると、ユーザが入力する可変な値をどう表示させるか、、、
当時は結構頭悩ませた。
例えば100文字〜2000文字入力を許容してて、
特に重要なものではないので普段は隠しておきたいみたいな時ね。（ツールチップ）。

今はvue使ってるので特にそこまで苦労はしてないけど、
とりあえず忘れないために忘備録。