jquery - css3 过渡手风琴菜单

Question

我制作了一个手风琴菜单来替换选择表单控件，并且我想使用 css3 转换使其平滑展开/收缩。
这是 jsfiddle 的链接：http: //jsfiddle.net/hKsCD/4/

为了达到预期的效果，我需要为每个链接的高度设置动画，但我不知道该怎么做。CSS3 过渡令人困惑。o_o

Answer 1

.accordion {
    height: 20px; /*define height to start from*/
    transition: height 2s;
    -moz-transition: height 2s; /* Firefox 4 */
    -webkit-transition: height 2s; /* Safari and Chrome */
    -o-transition: height 2s; /* Opera */
}
.accordion.expanded {
    height: 400px;/*desired height when expanded*/
}

您必须小心，但当高度从一个元素变化到另一个元素时，您应该在这些情况下使用最大宽度解决方法，因为“高度：自动”将不起作用。

height例如，在上面的示例max-height中将扩展状态替换max-height为元素永远不会达到的设置（不过不要太高，因为动画的速度是根据要动画的高度计算的 --> 一个太高的最大宽度（例如 9999 像素）导致动画速度如此之快，以至于您不会注意到它）