4. 不定高度使用transition实现动画展开

[fedono]

.element {
height: 0;
overflow: hidden; transition: height .25s;
}
.element.active {
height: auto; /*没有transition效果，只是生硬地展开*/ }

所以可以使用max-height，这里使用max-height 来超出height ，这样这时候就会自动展开到元素的高度。

.element {
max-height: 0;
overflow: hidden; transition: max-height .25s;
}
.element.active {
max-height: 666px; /* 一个足够大的最大高度值 */ }

注意
但是，使用此方法也有一点要注意，即虽然说从适用范围讲，max- height 值越大使用 场景越多，但是，如果 max-height 值太大，在收起的时候可能会有“效果延迟”的问 题，比方说，我们展开的元素高度是 100 像素，而 max-height 是 1000 像素，动画时间 是 250 ms，假设我们动画函数是线性的，则前 225 ms 我们是看不到收起效果的，因为 max-height 从 1000 像素到 100 像素变化这段时间，元素不会有区域被隐藏，会给人动 画延迟 225 ms 的感觉，相信这不是你想看到的。

因此，我个人建议 max-height 使用足够安全的最小值，这样，收起时即使有延迟，也 会因为时间很短，很难被用户察觉，并不会影响体验。