Question

我有一个用css过渡和css制作的菜单。这是这样构建的：在主题的主要部分中，是另一个具有主题内容的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。

这里是homepage。（为了测试它，菜单是正确的......）

Answer 1

之前已涵盖此问题：How can I transition height: 0; to height: auto; using CSS?，CSS transition auto height not working，CSS3 transition to height auto goes to height 0 first，http://css3.bradshawenterprises.com/animating_height/

看起来解决方法是使用max-height而不是height，并且对于过渡设置最大高度而不是height：auto。请注意，如果你设置的最大高度远远大于高度，那么过渡的时间将被抛弃。

.class2{
    max-height:200px;
}

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

具有css转换的菜单不能像预期的那样工作

1 个答案: