7

JS を使用せずに、CSS アニメーションを使用してアニメーション化されたドロップダウン メニューを作成しようとしています。この簡略化されたメニュー項目については、正しいツリーを吠えていると思っていましたが、どこが間違っているのかわかりません...

<div class="menu">Menu Item
    <ul>
        <li>Dropdown 1</li>
        <li>Dropdown 2</li>
        <li>Dropdown 3</li>
        <li>Dropdown 4</li>
        <li>Dropdown 5</li>
    </ul>
</div>

そして、次の CSS;

.menu ul {
    height: 0px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.menu:hover ul {
    height: auto;
}

Thought that should successfully result in a scroll down of the div, but it just keeps appearing. Any thoughts? Cheers

4

4 に答える 4

11

このトピックを参照してください:高さ: 0; を移行するにはどうすればよいですか? 高さ: 自動; CSSを使用していますか？

簡単に言えば、にアニメートすることはできませんheight: auto;。サポートされていません。あらかじめ決められた固定の高さがある場合は、その特定の値にアニメーション化することでそれを行うことができます。たとえば、0px から 100px です。ただし、自動はサポートされていません。

上記のリンクの最初の回答は、一種の回避策が示されている別の記事にリンクしています。サイトに実装するためにそれを検討することができます。

CSS3 を使用して、height:0 からコンテンツの可変高さに移行できますか?

于 2013-05-07T14:38:39.153 に答える
4

ドロップダウンのアニメーションは純粋な CSS で実装できます:

ul {
  overflow: hidden;
  transition: all .3s ease;
}

ul.folded {
  max-height: 0;
}

ul.unfolded {
  max-height: 300px; //value of max-height should always bigger than actual sum of all li's height
}
于 2016-09-05T03:32:35.160 に答える