-1

CSSトランジションとCSSで作成されたメニューがあります。これは次のようにビルドされます: トピックのメイン div には、トピック コンテンツを含む別の div があります。これを表示したいときは、(onclick) メイン div にクラスを追加します。これには、height: auto; が含まれています。実際には例外のように機能しますが、適切な高さに設定する前に、div は高さを 0 に設定しています。なぜこれを行うのですか? これを回避する方法を知っている人はいますか？

コードは次のとおりです。

html:
<div class="class1" onclick="this.className='class1 class2'">
    test topic: (click here)
    <div>
        <ul>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
    </div>
</div>

css:
class1{
    height: 35px;
    overflow: hidden;
    transition: all 2s;
}
class2{
    height: auto;
}

ここに jsfiddle があります。

そしてこちらがホームページ。（それをテストするために、メニューは正しいです...）

4

1 に答える 1

0

これは以前にカバーされています: How can I transition height: 0; 高さ: 自動; CSSを使用していますか？、CSS トランジションの自動高さが機能しない、高さ自動への CSS3 トランジションが最初に高さ 0 になる、http://css3.bradshawenterprises.com/animating_height/

回避策は、height の代わりに max-height を使用し、トランジションには height:auto ではなく max-height を設定することです。max-height をこれまでの高さよりもはるかに大きく設定すると、トランジションのタイミングがずれることに注意してください。

.class2{
    max-height:200px;
}

フィドルを使用したデモ: http://jsfiddle.net/Jag96/SwWXm/

于 2013-08-15T14:36:04.157 に答える