-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。

这里是主页。（测试一下，menue 是对的……）

4

1 回答 1

0

之前已经介绍过：How can I transition height: 0; 到高度：自动；使用 CSS？, CSS 过渡自动高度不起作用, CSS3 过渡到高度自动转到高度 0 , http://css3.bradshawenterprises.com/animating_height/

看起来解决方法是使用最大高度而不是高度，并且为您的过渡设置最大高度而不是高度：自动。请注意，如果您设置的最大高度远大于高度，则转换的时间将被抛出。

.class2{
    max-height:200px;
}

使用您的小提琴进行演示：http: //jsfiddle.net/Jag96/SwWXm/

于 2013-08-15T14:36:04.157 回答