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：auto”将不起作用。

e.g。将以上示例中的height替换为max-height，并将展开状态集max-height替换为元素永远不会达到的内容（不是太高，因为动画的速度是根据高度计算的要动画 - ＆gt;最大宽度太高（例如9999px）会导致动画速度太快而你没有注意到它。

css3过渡手风琴菜单

1 个答案: