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

Post on:2023年12月7日

はじめに

長年CSSに携わってきた人なら、一度はheight: 0;からheight: auto;へのトランジションを試したことがあるかもしれません。そこで分かったことは、それが機能しない😢 ということでしょう。

しかし、ここに朗報があります！
今日、この問題を解決する実装方法があります。CSS Gridを使用することで、非常に簡単に、そして完璧に機能します！

さっそくその実装方法を解説します。
まずは、その元となるシンプルなアコーディオンをご覧ください。

See the Pen
Transition from height 0 to auto in pure CSS (1 / 4) by Francesco Vetere (@francescovetere)
on CodePen.

HTMLは、非常にシンプルです。

<div class="accordion">
  <div class="accordion-title">Hover me!</div>
  <div class="accordion-body">
    <div>
      <p>Lorem ipsum ...</p>
    </div>
  </div>
</div>

<div class="accordion-title">Hover me!</div>

<div>

<p>Lorem ipsum ...</p>

</div>

アコーディオンの上にマウスを置いてホバーすると、ドロップダウンが表示されます。これはこれで素晴らしいことですが、もしドロップダウンをスムーズなトランジションで表示したい場合はどうすればよいと思いますか？

CSSには、heightプロパティがトランジションするようにしてみました。

.accordion-body {
  height: 0;
  transition: 500ms height ease;
}

.accordion:hover .accordion-body {
  height: auto;
}

.accordion-body {

height: 0;

transition: 500ms height ease;

}

.accordion:hover .accordion-body {

height: auto;

}

❌ 残念ながらこのCSSは機能しません。
トランジションせずに、アコーディオンが開閉するだけです。前述したように、height: 0;からheight: auto;へのトランジションはCSSでは不可能です。

🤔 これを解決するにはどうすればよいか

最初の解決策は、heightプロパティをautoではなく、固定値にすることです。

しかしこれは機能するかもしれませんが、素晴らしい解決策ではありません。アコーディオンの高さを数値で表すためにはJavaScriptで計算する必要があります、、、これは私が目指すものではありません！

😕 CSSのみで実装できますか？

💡 CSSのみで実装するには、どうすればよいでしょうか。autoの代わりに、max-heightを使用すれば実装できるでしょうか？

.accordion-body {
  max-height: 0;
  transition: 500ms max-height ease;
}

.accordion:hover .accordion-body {
  max-height: 200px;
}

.accordion-body {

max-height: 0;

transition: 500ms max-height ease;

}

.accordion:hover .accordion-body {

max-height: 200px;

}

実際の動作は、下記をご覧ください。

See the Pen
Transition from height 0 to auto in pure CSS (2/4) by Francesco Vetere (@francescovetere)
on CodePen.

max-heightに固定値を定義しているため、ブラウザはトランジションを正しく実行できるようになりました。

😕 唯一の問題は、max-heightに固定値を定義しているため、コンテンツがオーバーフローする可能性があることです。たとえば、下記のようにアコーディオンのコンテンツ量が多い場合に対応できません。

See the Pen
Transition from height 0 to auto in pure CSS (3/4) by Francesco Vetere (@francescovetere)
on CodePen.

コンテンツ量が常に一定の高さを超えないのであれば、この方法を使用しても問題はありません。max-heightに適切な値を使用するだけで大丈夫です。

ただし、max-heightの値を大きくすればするほど、トランジションが奇妙になることに注意してください。たとえば、さきほどのデモでmax-height: 1000px;にするとどのように変わるか試してみてください。

🤔 CSSで実装する最適解

CSSのみでもっとうまく実装できるでしょうか？
そもそも固定のheightやmax-heightを避けることはできるのでしょうか？

それを解決するには、CSS Gridが役立ちます🎉

✅ 1つのグリッドアイテムでCSS Gridを作成するというテクニックで実装できます。

あとは、grid-template-rowsをofrから1frにトランジションさせるだけです。これにより、グリッドアイテムが0から「ナチュラルな」高さにトランジションします。とてもシンプルです！

.accordion-body {
  display: grid; 
  grid-template-rows: 0fr;
  transition: 250ms grid-template-rows ease;
}

.accordion:hover .accordion-body {
  grid-template-rows: 1fr;
}

.accordion-body > div {
  overflow: hidden;
}