<p>CSS トランジションを使用して <code></code></p><ul> を下にスライドさせようとしています。 <p><br /></p> <p><code></code></p><ul> <code>高さ: 0;</code> から始まります。ホバーすると、高さが <code>height:auto;</code> に設定されます。ただし、これでは、</em> 遷移せずに <em> が表示されるだけになります。 <p><code>height: 40px;</code> から <code>height: auto;</code> にすると、<code>height: 0;< までスライドします。 /code> そして突然正しい高さにジャンプします。 </p> <p>JavaScript を使用せずにこれを行うにはどうすればよいですか? </p> <p><br /></p> <pre class="brush:css;toolbar:false;">#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 { フォントの太さ: 太字; }</pre> <pre class="brush:html;toolbar:false;">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></pre> <p><br /></p></ul></ul>