CSS を使用して height:0;height:auto; を遷移するにはどうすればよいですか?

Question

CSS トランジションを使用して

を下にスライドさせようとしています。




高さ: 0; から始まります。ホバーすると、高さが height:auto; に設定されます。ただし、これでは、 遷移せずに が表示されるだけになります。

height: 40px; から height: auto; にすると、height: 0;< までスライドします。 /code> そして突然正しい高さにジャンプします。

JavaScript を使用せずにこれを行うにはどうすればよいですか?




#child0 {
  高さ: 0;
  オーバーフロー: 非表示;
  背景色: #dedede;
  -moz-transition: 高さ 1 秒の緩和;
  -webkit-transition: 高さ 1 秒の簡単さ;
  -o-transition: 高さ 1 秒の緩和。
  トランジション: 高さ 1 秒の緩和。
}
#parent0:ホバー #child0 {
  高さ: 自動;
}
#child40 {
  高さ: 40ピクセル;
  オーバーフロー: 非表示;
  背景色: #dedede;
  -moz-transition: 高さ 1 秒の緩和;
  -webkit-transition: 高さ 1 秒の簡単さ;
  -o-transition: 高さ 1 秒の緩和。
  トランジション: 高さ 1 秒の緩和。
}
#parent40:ホバー #child40 {
  高さ: 自動;
}
h1 {
  フォントの太さ: 太字;
}

CSS の 2 つのスニペットの唯一の違いは、一方の高さは 0、もう一方の高さは 40 であることです。
<時間>
<div id="parent0">
  <h1>私にカーソルを合わせてください (高さ: 0)</h1>
  <div id="child0">一部のコンテンツ
    <br>一部のコンテンツ
    <br>一部のコンテンツ
    <br>一部のコンテンツ
    <br>一部のコンテンツ
    <br>一部のコンテンツ
    <br>
  </div>
</div>
<時間>
<div id="parent40">
  <h1>私にカーソルを合わせてください (高さ: 40)</h1>
  <div id="child40">一部のコンテンツ
    <br>一部のコンテンツ
    <br>一部のコンテンツ
    <br>一部のコンテンツ
    <br>一部のコンテンツ
    <br>一部のコンテンツ
    <br>
  </div>
</div>

Answer 1

scaleY を使用する必要があります。

リーリー リーリー

上記のコードのベンダー プレフィックス付きバージョンを jsfiddle で作成し、高さの代わりにscaleY を使用するように jsfiddle を変更しました。

＃＃＃＃＃＃＃＃＃編集＃＃＃＃＃＃

scaleY がコンテンツを変換する方法を好まない人もいます。これが問題になる場合は、代わりに clip を使用することをお勧めします。 リーリー リーリー

Answer 2

トランジションでは height の代わりに max-height を使用します。そして、max-height の値をボックスよりも大きな値に設定します。

Chris Jordan の に対する回答は、別の JSFiddle デモでご覧ください /stackoverflow.com/a/20226830/18706">

リーリー リーリー