CSS を使用して高さを 0 から自動に移行する

CSS を使用した 0 から自動へのスムーズな高さの変化

CSSとHTML

<style>
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
  #parent:hover #child {
    height: 100px; /* Set this to the max height you expect */
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>

スムーズな高さの変化のための JavaScript ソリューション

HTML、CSS、JavaScript

<style>
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>
<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');
  parent.addEventListener('mouseenter', () => {
    child.style.height = child.scrollHeight + 'px';
  });
  parent.addEventListener('mouseleave', () => {
    child.style.height = '0';
  });
</script>

CSS変数を使用したスムーズな高さの変化

CSSとHTML

<style>
  :root {
    --max-height: 100px;
  }
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
  #parent:hover #child {
    height: var(--max-height);
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>

CSS トランジションとアニメーションに関するよくある質問

1. CSS を使用して高さを 0 から自動に移行するにはどうすればよいですか?
2. これを実現するには、固定高さと JavaScript 高さの値を動的に設定します。純粋な CSS ソリューションには限界があるため、 height: auto 直接アニメーション化することはできません。
3. CSS におけるトランジションとアニメーションの違いは何ですか?
4. CSS トランジションは、通常はホバーなどの状態変化時に、ある状態から別の状態にプロパティ値をスムーズに (一定の期間にわたって) 変更する方法を提供します。 CSS アニメーションでは、キーフレームを使用して状態とタイミングを定義する、より複雑なシーケンスが可能になります。
5. 動的な高さを持つ要素に CSS トランジションを使用できますか?
6. はい。ただし、通常は、スムーズな移行のために事前に高さを計算するか、JavaScript を使用して高さの値を動的に設定する必要があります。
7. の目的は何ですか overflow: hidden; CSSトランジションのプロパティ?
8. の overflow: hidden; プロパティは、要素の境界を超えるコンテンツを非表示にするために使用されます。これは、高さの変更を伴うきれいなトランジションに不可欠です。
9. どうやって keyframes CSSアニメーションを扱うには？
10. Keyframes CSS アニメーションでは、アニメーション中のさまざまな時点で要素の状態を定義できます。各キーフレームでプロパティとその値を指定して、複雑なアニメーションを作成できます。
11. CSS トランジションとアニメーションを組み合わせることはできますか?
12. はい、CSS トランジションとアニメーションを組み合わせると、状態の変化と継続的なアニメーションの両方を処理できるため、より豊かなユーザー エクスペリエンスを提供できます。
13. とは scrollHeight JavaScriptで？
14. scrollHeight オーバーフローにより画面に表示されないコンテンツを含む、要素の合計の高さを返します。これは、スムーズなトランジションのための動的な高さを計算するのに役立ちます。
15. どうやって animation-delay 仕事？
16. の animation-delay プロパティはアニメーションをいつ開始するかを指定します。これにより、複数のアニメーションをシーケンスしてレイヤー効果を得ることができます。
17. なぜですか :root CSSで使われていますか？
18. の :root pseudo-class はドキュメントのルート要素をターゲットとします。これは、スタイルシート全体で再利用できるグローバル CSS 変数を定義するためによく使用されます。

スムーズな高さの変化に関する最終的な考え

CSS で高さ 0 から自動へのスムーズな移行を実現するには、いくつかのテクニックを組み合わせる必要があります。純粋な CSS はシンプルさを提供しますが、事前定義された高さの必要性によって制限されます。 JavaScript を統合することで、高さを動的に計算して設定し、シームレスな移行を実現できます。 CSS 変数を利用すると、動的な値を管理するための柔軟なアプローチも提供できます。これらの方法を組み合わせることで、開発者は、通常、高さの変化に伴う突然の変化を伴うことなく、よりインタラクティブで魅力的な Web エクスペリエンスを作成できます。