关于css3：我如何转换高度：0;

How can I transition height: 0; to height: auto; using CSS?

我正在尝试使用CSS转换使

height: 0;

height:auto;

如果我从height: 40px;到height: auto;，它就会滑到height: 0;，然后突然跳到正确的高度。

如果不使用javascript，我还能怎么做？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

#child0 {
height: 0;
overflow: hidden;
background-color: #dedede;
-moz-transition: height 1s ease;
-webkit-transition: height 1s ease;
-o-transition: height 1s ease;
transition: height 1s ease;
}
#parent0:hover #child0 {
height: auto;
}
#child40 {
height: 40px;
overflow: hidden;
background-color: #dedede;
-moz-transition: height 1s ease;
-webkit-transition: height 1s ease;
-o-transition: height 1s ease;
transition: height 1s ease;
}
#parent40:hover #child40 {
height: auto;
}
h1 {
font-weight: bold;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

The only difference between the two snippets of CSS is one has height: 0, the other height: 40.

Hover me (height: 0)
Some content
Some content
Some content
Some content
Some content
Some content

Hover me (height: 40)
Some content
Some content
Some content
Some content
Some content
Some content

相关讨论

转换时使用max-height，不使用height。在EDOCX1[4]上设置一个值，使其大于您的框所能得到的值。

请参阅Chris约旦在另一个答案中提供的jfiddle演示。

1
2
3
4
5
6
7
8
9
10
11

#menu #list {
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
background: #d5d5d5;
}

#menu:hover #list {
max-height: 500px;
transition: max-height 0.25s ease-in;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

hover me
<ul id="list">


<li>
item
</li>

<li>
item
</li>

<li>
item
</li>

<li>
item
</li>

<li>
item
</li>

</ul>

相关讨论

这很管用！除了开始的时候有一个延迟，因为它开始的时候是最大高度，初始高度很高……嗯，我觉得这有点烦人。
+1个很好的解决方案！过渡的速度计算为您指定的过渡到最大高度值的时间…但是，由于高度将小于最大高度，因此到实际高度的转换将比指定时间更快(通常显著)。
正如@Kingjeffrey所提到的，这种转变以较慢的速度发生也是一件好事。假设您正在展开一个菜单，菜单将以恒定的速率展开每个菜单项，因此展开包含9个项的菜单将比包含1的菜单花费9倍的时间。当使用高度时，具有1项的菜单的扩展速度比具有9项的菜单慢得多。视情况而定。
请注意，当必须使用比实际计算值大得多的值时，这可能会导致难看的转换结束。我注意到这一点，同时尝试使一个DIV从0高度增长到内容高度，由于屏幕大小的不同而变化很大(2560x1440显示器上有2行，智能手机上有10行)。为此，我最终选择了JS。
我花了很长时间才弄明白为什么过渡如此不同…我想下次我应该多读一些评论。所以，是的，转换的速度会比预期的快得多，尽管这可以通过改变所使用的转换类型来管理。将"最大高度"减小为0时使用"减缓"，将"最大尺寸"增大时使用"减缓"。
非常难看的解决方案，因为它会在一个方向上造成延迟，而不是在另一个方向。
有了这个解决方案，效果的持续时间就不受重视了。这对完全回拨很烦人。
这是一个相当懒惰的解决方案。我假设OP想要使用height:auto，因为容器的扩展高度有些不可预测。此解决方案将导致动画在可见之前延迟。此外，动画的可见持续时间将是不可预测的。通过计算每个容器子节点的组合高度，然后放宽到一个精确的高度值，您将得到更可预测(可能更平滑)的结果。
我认为值得注意的是，最终的最大高度值不能太大——至少在铬合金中，它不会起作用。
您可以添加"全部"，例如：转换所有1轻松
@汤姆和第225；？zato display:none破坏了它，第二个最大高度是如此之大，它以荒谬的速度膨胀，使它看起来很快，我添加了overflow:hidden，以防止文本进入容器外部。所以这个版本的小提琴可以
当您有可变长度的项目时，这将立即中断。它向上滑动时会有延迟，转换所需的时间是可变的(取决于最大高度的"高"值和实际元素的大小)。关键是要模拟汽车的工作原理。
顺便说一下，在jsFiddle中，它使用setTimeout使动画"固定"。事实证明，所需要的只是回流(查询offsetheight)。
这不会造成错误的延迟和速度印象吗？
所有这些答案都不是很"正确"……我只有两个CSS声明的解决方案(今天添加了答案)。它不使用最大高度。它是纯粹的CSS和超级简单的设置。进行相对定位。这是一个fiddle jsfidle.net/n5xfg/2596
Videsignz，Safari 9执行前的重大延迟，
我不得不附和蒂姆的评论："非常难看的解决方案，因为它在一个方向上产生了延迟，而不是在另一个方向。"打开隐藏的DIV时，从0到高度的转换在触发时立即开始。但是，隐藏DIV时，转换从max height(而不是height)开始，因此当它从max height转换到height(在这段时间内，其他动画已经发生，因此，看起来高度更改被延迟了)，并且当它从height转换到0时，最终会有可见的高度更改。可怕的。可怕的.可怕的。
您还可以使用最小高度，这很好，因为这样高度可以扩展到更长的内容。
@Triynko你能想出解决方案而不是重复一年前别人已经提到的事情吗？容易抱怨，很难找到替代方案，对吗？
我发现了一个部分修复延迟问题的方法，即在可变长度的内容中使用这种技术时，通过设置列表元素的不透明度及其最大高度的动画，延迟看起来更自然，因为不透明度在内容开始向上滑动之前就开始褪色，而在内容立即开始时，延迟会慢慢淡入。滑下去。它并不完美，但我认为它比单独设置最大高度要好得多。
如果适用(在我的情况下)，您可以将转换应用到打开状态，这样当您使用"最大高度"时，它将正确展开(尽管时间可能需要调整)，当您将"最大高度"恢复为零时，它将立即折叠。从视觉的角度看，它看起来很完美，没有奇怪的延迟。对我来说，这是一个合适的解决方案。
此解决方案在中使用时出错：target，新目标打开后旧目标关闭，在浏览器散列活动自动定位后移动内容的滚动位置，为避免混淆scaley或transformy和max height，请查看我在@andrew messier answer上的评论以获取要比较的链接
@Daniel.Betts请不要将代码更改为其他用户的答案。如果您有一个尚未作为答案提供的单独解决方案，请将其添加为自己的答案。
如果你的max-height太大，启动会有延迟。为了解决这个问题，用cubic-bezier(0,1,0,1)代替ease-in，用cubic-bezier(1,0,1,0)代替ease-out。
@Triynko：人们不能接受这样一个事实，即这是CSS布局的一个基本限制，如果没有黑客和解决方案，就不能可靠地解决这些限制，而所有这些都是他们自己的权衡。这就是为什么这个问题有如此多的答案，以及为什么人们会选择已经被证明是错误的或有缺陷的"解决方案"。真的很难过。我会发表一篇深入探讨为什么这是一个基本限制的答案，但考虑到这里的答案数量，我不确定这是否值得我花时间。
我不喜欢这个解决方案。过渡时间与其他动画的过渡时间无关。
如果初始元素的最大高度不应为0，则此操作将不起作用，即当您最初隐藏一个子元素时，该子元素会使父元素在悬停时变大：)
非常感谢你的最佳答案
因为我们设置的是最大高度0，而不是实际隐藏元素，所以屏幕阅读器仍然可以读取它们，这可能是您想要的，也可能不是您想要的。
另外，如果它们包含一些可制表的元素，那么它们仍然是按制表符顺序排列的。
我不知道为什么人们不喜欢这个解决方案。这是完美的。
@Meliodas感谢Cubic Bezier解决方案，即使我将Max Height设置为50000(只是为了确保我的内容不会被切掉)，它也能很好地工作。
如果元素的实际高度变化且未知，这仍然是唯一的方法吗？

你应该用scaley代替。

HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<p>
Here (scaleY(1))
</p>

<ul>

<li>
Coffee
</li>

<li>
Tea
</li>

<li>
Milk
</li>

</ul>

CSS：

1
2
3
4
5
6
7
8
9
10

ul {
background-color: #eee;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.26s ease;
}

p:hover ~ ul {
transform: scaleY(1);
}

我在jsFiddle上制作了一个以供应商为前缀的上述代码版本，http://jsfiddle.net/dotnetcompenter/phyqc/9/，并将您的jsFiddle更改为使用scaley而不是height，http://jsfiddle.net/dotnetcompenter/7cnfc/206/。

相关讨论

我之所以反对这个答案，是因为它在支持CSS3转换的浏览器中工作得很好，但应该注意的是，它在IE<9中根本不起作用，在IE<10中也不会动画(只是跳跃)。
这种方法只部分地达到了预期的效果，但实际上并没有去除空间。转换后的盒子就像一个相对定位的元素——不管如何缩放，空间都会被占用。看看这个JSfiddle，它会带您的第一个JSfiddle，并在底部添加一些伪文本。请注意，当框高度缩放为零时，下面的文本不会向上移动。
现在它做到了：jsfiddle.net/gndx3/1基本上，您需要根据需要设置元素的样式。在css/html中没有类似于银弹或小部件的行为。
Animuson的意思是缩放的DIV的内容现在是-好的，缩放的。想象一下动画应该像一个抽屉-效果将不一样，它将是不适当的。因此，这种解决方案在所有情况下都不起作用。
当我为尝试不同方法的人鼓掌时，这个解决方案带来的实际效果和复杂性远比已经糟糕的最大高度黑客要糟糕。请不要使用。
间隔失败jsfidle.net/phyqc/336
@好的，好的。这里有一个更像抽屉的：jsfiddle.net/dotnetcharpenter/wtl2r
IE9+也就是说，它适用于所有补丁的现代移动浏览器。我投票赞成。
这与我所希望的非常接近，但我只能通过在转换发生时进行空间"跳跃"来处理间距问题，我不喜欢内容看起来被压扁的方式。+一个是创新，一个高质量的答案。
@videsignz设置margin-top: 100%;的一个问题是，百分比裕度是根据包含块的宽度确定的。如果块很窄，隐藏的文本很多，那么margin-top: 100%;不会隐藏inner的整个文本。换句话说，margin-top: 100%;并不意味着100%的块高度。
这是。。。好的...如果你不在乎视觉效果和动画高度不一样。
把max-height和scaleY和transition-delay组合在max-height上怎么样？我认为这更接近于OP想要的jsfiddle.net/bnuudn44/2

当涉及的一个高度是auto时，您当前无法在高度上设置动画，必须设置两个明确的高度。

相关讨论

我一直使用的解决方案是先淡出，然后缩小font-size、padding和margin值。它看起来与擦除不同，但它在没有静态height或max-height的情况下工作。

工作示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/* final display */
#menu #list {
margin: .5em 1em;
padding: 1em;
}

/* hide */
#menu:not(:hover) #list {
font-size: 0;
margin: 0;
opacity: 0;
padding: 0;
/* fade out, then shrink */
transition: opacity .25s,
font-size .5s .25s,
margin .5s .25s,
padding .5s .25s;
}

/* reveal */
#menu:hover #list {
/* unshrink, then fade in */
transition: font-size .25s,
margin .25s,
padding .25s,
opacity .5s .25s;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

hover me
<ul id="list">

<li>
item
</li>

<li>
item
</li>

<li>
item
</li>

<li>
item
</li>

<li>
item
</li>

</ul>

<p>
Another paragraph...
</p>

相关讨论

你可以，用一些非语义的诡计。我通常的方法是设置一个外部分区的高度动画，这个外部分区只有一个子分区，它是一个没有样式的分区，只用于测量内容高度。

1
2
3
4
5
6
7
8
9

1
2
3
4
5
6
7
8
9
10

#grow {
-moz-transition: height .5s;
-ms-transition: height .5s;
-o-transition: height .5s;
-webkit-transition: height .5s;
transition: height .5s;
height: 0;
overflow: hidden;
outline: 1px solid red;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<input type="button" onclick="growDiv()" value="grow">

The contents of my div.

The contents of my div.

The contents of my div.

The contents of my div.

The contents of my div.

The contents of my div.

我们只想不使用.measuringWrapper，只需将div的高度设置为auto，并设置动画，但这似乎不起作用(高度已设置，但没有动画发生)。

1
2
3
4
5
6
7
8

function growDiv() {
var growDiv = document.getElementById('grow');
if (growDiv.clientHeight) {
growDiv.style.height = 0;
} else {
growDiv.style.height = 'auto';
}
}

1
2
3
4
5
6
7
8
9
10

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

我的解释是动画运行需要一个明确的高度。当高度(起始高度或结束高度)为auto时，无法获得高度动画。

相关讨论

我知道这是30多岁的人对这个问题的回答，但我认为这是值得的，所以我来看看。这是一个仅限于CSS的解决方案，具有以下属性：好的。

开始的时候没有延误，过渡也没有提前停止。在两个方向上(展开和折叠)，如果在CSS中指定了300毫秒的转换持续时间，则转换需要300毫秒，周期。
它转换了实际高度(与transform: scaleY(0)不同)，所以如果可折叠元素后面有内容，它就做了正确的事情。
虽然(和其他解决方案一样)有一些神奇的数字(比如"选择一个比你的盒子更高的长度")，但如果你的假设最终是错误的，那就不是致命的。在这种情况下，转换看起来可能并不令人惊讶，但在转换前后，这不是问题：在扩展(height: auto状态下，整个内容始终具有正确的高度(与选择的max-height高度过低不同)。在崩溃状态下，高度应该是零。

演示

这是一个演示，有三个可折叠的元素，高度不同，都使用相同的CSS。单击"运行代码段"后，您可能需要单击"整页"。注意，javascript只切换collapsedcss类，不涉及度量。(您可以使用复选框或:target在完全不使用任何javascript的情况下进行这个精确的演示)。还要注意，负责转换的CSS部分非常短，HTML只需要一个额外的包装器元素。好的。

1
2
3
4
5
6

$(function () {
$(".toggler").click(function () {
$(this).next().toggleClass("collapsed");
$(this).toggleClass("toggled"); // this just rotates the expander arrow
});
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

.collapsible-wrapper {
display: flex;
overflow: hidden;
}
.collapsible-wrapper:after {
content: '';
height: 50px;
transition: height 0.3s linear, max-height 0s 0.3s linear;
max-height: 0px;
}
.collapsible {
transition: margin-bottom 0.3s cubic-bezier(0, 0, 0, 1);
margin-bottom: 0;
max-height: 1000000px;
}
.collapsible-wrapper.collapsed > .collapsible {
margin-bottom: -2000px;
transition: margin-bottom 0.3s cubic-bezier(1, 0, 1, 1),
visibility 0s 0.3s, max-height 0s 0.3s;
visibility: hidden;
max-height: 0;
}
.collapsible-wrapper.collapsed:after
{
height: 0;
transition: height 0.3s linear;
max-height: 50px;
}

/* END of the collapsible implementation; the stuff below
is just styling for this demo */

#container {
display: flex;
align-items: flex-start;
max-width: 1000px;
margin: 0 auto;
}

.menu {
border: 1px solid #ccc;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
margin: 20px;

}

.menu-item {
display: block;
background: linear-gradient(to bottom, #fff 0%,#eee 100%);
margin: 0;
padding: 1em;
line-height: 1.3;
}
.collapsible .menu-item {
border-left: 2px solid #888;
border-right: 2px solid #888;
background: linear-gradient(to bottom, #eee 0%,#ddd 100%);
}
.menu-item.toggler {
background: linear-gradient(to bottom, #aaa 0%,#888 100%);
color: white;
cursor: pointer;
}
.menu-item.toggler:before {
content: '';
display: block;
border-left: 8px solid white;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
width: 0;
height: 0;
float: right;
transition: transform 0.3s ease-out;
}
.menu-item.toggler.toggled:before {
transform: rotate(90deg);
}

body { font-family: sans-serif; font-size: 14px; }

*, *:after {
box-sizing: border-box;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

好的。它是如何工作的？

事实上，实现这一点涉及两个转变。其中一个将margin-bottom从0px(扩展状态)转换为-2000px，处于崩溃状态(类似于此答案)。这里的2000是第一个神奇数字，它是基于你的盒子不会比这个高的假设(2000像素似乎是一个合理的选择)。好的。

单独使用margin-bottom转换有两个问题：好的。

如果你有一个高于2000像素的盒子，那么一个margin-bottom: -2000px不会隐藏所有东西——即使在折叠的情况下也会有可见的东西。这是我们稍后要做的一个小修复。
如果实际框高1000像素，并且您的转换长度为300毫秒，那么可视转换在大约150毫秒后已经结束(或者在相反的方向上，延迟150毫秒)。

解决第二个问题就是第二个转换出现的地方，这个转换在概念上针对包装器的最小高度("概念上"，因为我们实际上并没有为此使用min-height属性；稍后将详细介绍)。好的。

这是一个动画，演示了如何将底部边缘过渡与最小高度过渡结合在一起，两者的持续时间相同，从而使我们获得从全高度到零高度的组合过渡，其持续时间相同。好的。

animation as described above 好的。

左栏显示负的下边缘如何向上推动底部，从而降低可见高度。中间的条显示了最小高度如何确保在崩溃的情况下，过渡不会过早结束，而在扩展的情况下，过渡不会延迟开始。右栏显示了这两个选项的组合如何使框在正确的时间内从全高过渡到零高。好的。

在我的演示中，我将50px作为最小高度的上限值。这是第二个魔法数字，它应该比盒子的高度还要低。50px看起来也很合理；看起来你不太可能经常想让一个元素可以折叠，而这个元素一开始甚至不高50像素。好的。

正如您在动画中看到的，所产生的转换是连续的，但它是不可微分的——当最小高度等于由下边缘调整的整个高度时，速度会突然发生变化。这在动画中非常明显，因为它对两个过渡都使用线性计时函数，而且整个过渡非常慢。在实际情况下(我的演示在顶部)，转换只需要300毫秒，并且底部边缘转换不是线性的。我在这两种转换中都使用了很多不同的计时功能，而最后使用的那些功能让我觉得它们最适合各种各样的情况。好的。

还有两个问题需要解决：好的。

从上面看，高度超过2000像素的盒子并没有完全隐藏在折叠状态中，
相反的问题是，在非隐藏的情况下，低于50像素高度的框太高了，即使转换没有运行，因为最小高度使它们保持在50像素。

我们解决了第一个问题，在崩溃的情况下给容器元素一个max-height: 0，并使用0s 0.3s转换。这意味着它并不是真正的转换，但是max-height应用时会有延迟；它只在转换结束后才应用。为了使其正确工作，我们还需要为相反的非折叠状态选择一个数字max-height。但与2000像素的情况不同，在这种情况下，选择太大的数字会影响转换的质量，在这种情况下，这真的不重要。所以我们可以选择一个非常高的数字，我们知道任何高度都不会接近这个值。我选了一百万像素。如果你觉得你可能需要支持高度超过一百万像素的内容，那么1)对不起，2)只需添加几个零。好的。

第二个问题是我们没有实际使用min-height进行最小高度转换的原因。相反，容器中有一个::after伪元素，其中height从50px转换为零。这与min-height的效果相同：它不会让容器收缩到伪元素当前的高度之下。但是因为我们使用的是height，而不是min-height，所以我们现在可以使用max-height(再次延迟应用)在转换结束后将伪元素的实际高度设置为零，确保至少在转换之外，即使是小元素也具有正确的高度。因为min-height比max-height强，所以如果我们使用容器的min-height而不是伪元素的height的话，这是行不通的。就像前一段中的max-height一样，这个max-height也需要一个值作为转换的另一端。但在这种情况下，我们可以选择50像素。好的。

在chrome(win、mac、android、ios)、firefox(win、mac、android)、edge、ie11(除了我的演示版中的flexbox布局问题，我不需要调试)和safari(mac、ios)中进行测试。说到flexbox，应该可以在不使用任何flexbox的情况下实现此功能；事实上，我认为在IE7中几乎可以实现所有功能，除了没有CSS转换这一事实之外，这是一个非常没有意义的练习。好的。好啊。

相关讨论

使用CSS3转换设置高度动画的一个视觉解决方案是设置填充动画。

你不会完全得到擦除效果，但是使用过渡持续时间和填充值应该能让你足够接近。如果您不想显式地设置高度/最大高度，这应该是您想要的。

1
2
3
4
5
6
7
8
9
10
11
12

div {
height: 0;
overflow: hidden;
padding: 0 18px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
}
div.animated {
height: auto;
padding: 24px 18px;
}

http://jsfiddle.net/catharsis/n5xfg/17/(在jsfiddle上即兴演奏)

相关讨论

我的解决方法是将最大高度转换为精确的内容高度，以获得平滑的动画效果，然后使用transitionend回调将最大高度设置为9999px，以便内容可以自由调整大小。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

.transitions {
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
}

body {
font-family:Arial;
line-height: 3ex;
}
code {
display: inline-block;
background: #fafafa;
padding: 0 1ex;
}
#toggle {
display:block;
padding:10px;
margin:10px auto;
text-align:center;
width:30ex;
}
#content {
overflow:hidden;
margin:10px;
border:1px solid #666;
background:#efefef;
opacity:1;
}
#content .inner {
padding:10px;
overflow:auto;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

相关讨论

聪明！我喜欢max-height唯一的解决方案！我制作动画的内容也没有那么灵活：)
相当容易击败…jquery实际上提供了不会使高度静态的.slideUp、.slideDown和.slideToggle方法。试试这个。它基本上只是一行，执行完全相同的操作，并将其扩展到动画的位置，即使在您扩展内容时，也不应该是太大的挑战。因为你已经在使用jquery了…
@Derija93使用的是普通的老javascript超时动画。挑战是使用CSS3转换。
嗯，是的。但是，如果您已经在使用jquery(一个提供大量"少写，多做"代码的库)，为什么要使用"css3转换"？我想指出的是，如果您的版本不使用jquery，那么它看起来可能会更好，即使更复杂，这样它几乎可以在任何网站上运行。我想我把它说得大错特错了。对不起。；)
如果我在Github上发布这个插件，那么是的，我完全同意。但这只是一个简单的概念证明。)
@Derija93可能是因为CSS3转换(根据我能找到的所有来源)比jquery动画有更好的性能。(事实上，对于我当前的用例来说非常重要，它把我带到了这里。)
@Derija93'因为与css3 transitions bro相比，javascript动画运行缓慢，并且对于jquery动画，您必须担心动画循环。在单击时制作动画，然后快速单击并观看动画重复。这是由CSS3处理的。
@卡普里卡，现在有点老了。我已经说过我误解了他试图证明的概念。总之，对于简单的动画，.stop可以解决相当复杂的动画循环问题。现在，当你设置高度和颜色的动画，但只想中断高度动画时，事情变得有点棘手…我明白你的意思。
元素的自动高度和所选的最大高度之间的差异将影响过渡的速度，此解决方案不令人满意。
尽管我最终使用的是普通的JS-addEventListener和设置height而不是max-height，但我仍然认为这是一个更好的答案。您还可以通过将height重置为auto并在事件侦听器完成其工作后删除事件侦听器，使其与多级折叠一起工作。

接受的答案对大多数情况都有效，但是当你的div在高度上可以有很大的变化时，它就不能很好地工作了——动画速度不依赖于内容的实际高度，而且它看起来很不稳定。

您仍然可以使用css执行实际的动画，但是您需要使用javascript计算项目的高度，而不是尝试使用auto。不需要jquery，但是如果您想要兼容性(适用于最新版本的chrome:)的话，可能需要稍微修改一下。

1
2
3
4
5
6
7

1
2
3
4
5
6

#menu #list {
height: 0px;
transition: height 0.3s ease;
background: #d5d5d5;
overflow: hidden;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

相关讨论

对每种状态使用不同缓和和延迟过渡的max-height。

HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Hover
<ul id="toggled">

<li>
One
</li>

<li>
Two
</li>

<li>
Three
</li>

<ul>

CSS：

1
2
3
4
5
6
7
8
9
10

#toggled{
max-height: 0px;
transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;
}

#trigger:hover + #toggled{
max-height: 9999px;
transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
transition-delay: 0s;
}

参见示例：http://jsfiddle.net/0hnjehjc/1/

相关讨论

没有硬编码值。

没有JavaScript。

没有近似值。

诀窍是使用隐藏和复制的div让浏览器理解100%的含义。

当您能够复制要动画化的元素的DOM时，此方法是合适的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.outer {
border: dashed red 1px;
position: relative;
}

.dummy {
visibility: hidden;
}

.real {
position: absolute;
background: yellow;
height: 0;
transition: height 0.5s;
overflow: hidden;
}

.outer:hover>.real {
height: 100%;
}

1
2
3
4
5
6
7
8
9
10
11

Hover over the box below:



unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable
content unpredictable content unpredictable content unpredictable content



unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable
content unpredictable content unpredictable content unpredictable content

相关讨论

几乎没有提到Element.scrollHeight属性，它在这里很有用，并且仍然可以用于纯CSS转换。属性始终包含元素的"完整"高度，而不管其内容是否以及如何因折叠高度而溢出(例如height: 0)。

因此，对于一个height: 0元素(有效地完全折叠)，它的"正常"或"完全"高度仍然可以通过其scrollHeight值(总是一个像素长度)很容易获得。

对于这样一个元素，假设它已经设置了过渡，例如(根据原始问题使用ul)：

1
2
3
4

ul {
height: 0;
transition: height 1s; /* An example transition. */
}

我们只需使用css，就可以触发所需的高度动画"扩展"，如下所示(这里假设ul变量引用列表)：

1	ul.style.height = ul.scrollHeight +"px";

就是这样。如果需要折叠列表，以下两个语句中的任何一个都可以：

1 2	ul.style.height ="0"; ul.style.removeProperty("height");

我的特定用例围绕着一个未知的动画列表，通常是相当长的长度，所以我不习惯于使用一个任意的"足够大"的height或max-height规范，并冒着突然需要滚动的截止内容或内容的风险(例如，如果overflow: auto)。此外，基于max-height的解决方案打破了这种宽松和定时，因为使用的高度可能比max-height达到9999px所需的时间要快得多。随着屏幕分辨率的增加，像9999px这样的像素长度在我嘴里留下了一种不好的味道。在我看来，这个特殊的解决方案以优雅的方式解决了这个问题。

最后，这里希望将来对CSS地址的修订能够更加优雅地完成这类工作——重新审视"计算"与"已用"和"已解析"值的概念，并考虑转换是否应应用于计算值，包括与width和height的转换(目前，这些转换有点像特殊处理)。

相关讨论

当我发表这篇文章时，已经有30多个答案了，但是我觉得我的答案比杰克已经接受的答案更好。

我不满意仅仅使用max-height和css3转换所产生的问题，因为正如许多评论所指出的那样，您必须将max-height值设置得非常接近实际高度，否则您将得到延迟。有关该问题的示例，请参阅此jfiddle。

为了解决这个问题(虽然仍然不使用javascript)，我添加了另一个HTML元素，它转换transform: translateYcss值。

这意味着使用了max-height和translateY：max-height允许元素向下推元素，而translateY提供我们想要的"即时"效果。与max-height的问题仍然存在，但其影响有所减弱。这意味着你可以为你的max-height值设置一个更大的高度，并且不用担心它。

总的好处是，在返回(崩溃)的转换中，用户可以立即看到translateY动画，因此，max-height需要多长时间并不重要。

解决方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

body {
font-family: sans-serif;
}

.toggle {
position: relative;
border: 2px solid #333;
border-radius: 3px;
margin: 5px;
width: 200px;
}

.toggle-header {
margin: 0;
padding: 10px;
background-color: #333;
color: white;
text-align: center;
cursor: pointer;
}

.toggle-height {
background-color: tomato;
overflow: hidden;
transition: max-height .6s ease;
max-height: 0;
}

.toggle:hover .toggle-height {
max-height: 1000px;
}

.toggle-transform {
padding: 5px;
color: white;
transition: transform .4s ease;
transform: translateY(-100%);
}

.toggle:hover .toggle-transform {
transform: translateY(0);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

Toggle!

<p>
Content!
</p>
<p>
Content!
</p>
<p>
Content!
</p>
<p>
Content!
</p>

Toggle!

<p>
Content!
</p>
<p>
Content!
</p>
<p>
Content!
</p>
<p>
Content!
</p>

相关讨论

好吧，我想我想出了一个非常简单的答案…没有max-height，使用relative定位，用于li元素，是纯css。除了火狐，我什么都没有测试过，虽然从CSS来看，它应该可以在所有浏览器上运行。

小提琴：http://jsfiddle.net/n5xfg/2596/

CSS

1
2
3
4
5
6
7
8
9

.wrap { overflow:hidden; }

.inner {
margin-top:-100%;
-webkit-transition:margin-top 500ms;
transition:margin-top 500ms;
}

.inner.open { margin-top:0px; }

HTML

1	Some Cool Content

相关讨论

编辑：向下滚动查看更新的答案
我正在做一个下拉列表，看到了这篇文章…许多不同的答案，但我决定分享我的下拉列表太…它不是完美的，但至少它将只使用CSS下拉！我一直在使用transform:translatey(y)将列表转换为视图…你可以在测试中看到更多http://jsfiddle.net/bvepc/4/我把DIV放在每个LI后面，因为我的下拉列表是从上而来的，为了正确地显示它们，这是需要的，我的DIV代码是：

1
2
3
4
5
6

#menu div {
transition: 0.5s 1s;
z-index:-1;
-webkit-transform:translateY(-100%);
-webkit-transform-origin: top;
}

悬停是：

1
2
3
4

#menu > li:hover div {
transition: 0.5s;
-webkit-transform:translateY(0);
}

因为ul height设置为内容，它可以超越你的身体内容，所以我为ul做了这件事：

1
2
3
4
5

#menu ul {
transition: 0s 1.5s;
visibility:hidden;
overflow:hidden;
}

和悬停：

1
2
3
4

#menu > li:hover ul {
transition:none;
visibility:visible;
}

转换后的第二次是延迟，它将在我的下拉列表被动态关闭后隐藏…希望以后有人能从中受益。
BR/>编辑：我简直不敢相信PPL真的在使用这个原型！此下拉菜单仅用于一个子菜单，仅此而已！！我更新了一个更好的，可以有两个子菜单为LTR和RTL方向与IE8支持。< BR>LTR小提琴
用于RTL的小提琴
希望将来有人会发现这一点有用。

如果还提供最小高度和最大高度，则可以从高度0转换为高度：自动。

1
2
3
4
5
6
7
8
9
10
11
12
13

div.stretchy{
transition: 1s linear;
}

div.stretchy.hidden{
height: 0;
}

div.stretchy.visible{
height: auto;
min-height:40px;
max-height:400px;
}

相关讨论

我想我想出了一个非常可靠的解决方案

好啊！我知道这个问题和互联网一样古老，但我想我有一个解决方案，我把它变成了一个名为"突变转换"的插件。我的解决方案在DOM发生变化时为被跟踪元素设置style=""属性。最终的结果是，您可以使用良好的OLE CSS进行转换，而不使用黑客补丁或特殊的javascript。唯一需要做的就是使用data-mutant-attributes="X"设置要跟踪的元素。

1	This is an example with mutant-transition

就是这样！此解决方案使用mutationobserver跟踪DOM中的更改。因此，您不必设置任何内容，也不必使用JavaScript手动设置动画。更改将自动跟踪。但是，因为它使用了mutationobserver，所以只能在IE11+中转换。

小提琴！

从height: auto向height: 100%过渡的论证
在添加子项时演示转换height: auto。

相关讨论

flexbox解决方案

赞成的意见：

简单的
无JS
平滑过渡

欺骗：

元件需要放在固定高度的柔性容器中。

它的工作方式是始终具有flex基础：在包含内容的元素上自动执行，而改为转换flex grow和flex shrink。

编辑：受Xbox One界面启发改进的JS小提琴。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: 0.25s;
font-family: monospace;
}

body {
margin: 10px 0 0 10px;
}

.box {
width: 150px;
height: 150px;
margin: 0 2px 10px 0;
background: #2d333b;
border: solid 10px #20262e;
overflow: hidden;
display: inline-flex;
flex-direction: column;
}

.space {
flex-basis: 100%;
flex-grow: 1;
flex-shrink: 0;
}

p {
flex-basis: auto;
flex-grow: 0;
flex-shrink: 1;
background: #20262e;
padding: 10px;
width: 100%;
text-align: left;
color: white;
}

.box:hover .space {
flex-grow: 0;
flex-shrink: 1;
}

.box:hover p {
flex-grow: 1;
flex-shrink: 0;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<p>

Super Metroid Prime Fusion

</p>

<p>

Resident Evil 2 Remake

</p>

<p>

Yolo The Game

</p>

<p>

Final Fantasy 7 Remake + All Additional DLC + Golden Tophat

</p>

<p>

DerpVille

</p>

JS小提琴

以下是一种从任何起始高度(包括0)到自动(全尺寸和灵活)的转换方法，无需每个节点上的硬设置代码或任何要初始化的用户代码：https://github.com/csuwildcat/transition-auto。这基本上是你想要的圣杯，我相信——>http://codepen.io/csuwldcat/pen/kwsdf。只需将下面的JS文件放入页面，然后只需从要扩展和收缩的节点中添加/删除一个布尔属性-reveal=""。

以下是您作为用户需要做的所有事情，一旦您包含了示例代码下面的代码块：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/*** Nothing out of the ordinary in your styles ***/
<style>
div {
height: 0;
overflow: hidden;
transition: height 1s;
}
</style>

/*** Just add and remove one attribute and transition to/from auto! ***/

I have tons of content and I am 0px in height you can't see me...

I have tons of content and I am 0px in height you can't see me...
but now that you added the 'reveal' attribute,
I magically transitioned to full height!...

下面是要包含在您的页面中的代码块，在这之后，所有代码块都是肉汁：

把这个JS文件放到你的页面上-一切正常吗？

/*高度代码：自动；转换*/

/*演示代码*/

1
2
3
4
5
6

document.addEventListener('click', function(e){
if (e.target.nodeName == 'BUTTON') {
var next = e.target.nextElementSibling;
next.hasAttribute('reveal') ? next.removeAttribute('reveal') : next.setAttribute('reveal', '');
}
}, false);

相关讨论

不知道为什么我在这个问题上得到了-1，这是一个经验上更好的解决方案，没有硬编码的值或任何最大高度的丑陋完全符合OP的要求。
虽然这是一个比其他被建议的解决方案更干净和灵活的解决方案，但我个人认为这根本不应该是JS应该接触的东西。不是说你错了，只是叹息而已。
@但要清楚的是，JS只用于监视某些条件，并根据它监视的事件/条件添加一些属性/临时CSS值。转换仍然是在CSS中完成的。虽然我同意，但遗憾的是，这一级别的设置和手持操作对于真正满足看似简单的用例是必要的！：
动画和大小切换在iPhone、Android上不起作用，而且还没有在Windows Phone上测试过。
@Karolislamanauskas我刚在Galaxy S4上测试了Chrome、Firefox和Stock浏览器，它工作得很好。你在看我发布的演示吗？
嘿@csuwldcat，你发送的演示确实适用于Android 4.4.4。但不知怎的，当我把它用于我自己的需要时，它并不像预期的那样工作，它只是跳跃而没有动画。我也可以确认它在最近的桌面浏览器上工作。但是，演示在iPhone上不起作用，我正在使用浏览器堆栈进行调试。这是一个很好的插件和总的生活节省，如果我能让它在所有的设备上工作，我的一天会变得无限美好：P如果我真的了解代码是如何工作的，它也会很酷，目前它仍然像黑色魔术。
好吧，我明白这里的诀窍。是关键帧在模仿吗？这也解释了为什么它在IE上也不起作用。非常聪明的想法，但我不知道如何适应广泛的浏览器支持，该死。
@Karolislamanauskas不，这不是一个问题-即支持CSS关键帧和RequestAnimationFrame。我使用clip作为我的虚拟属性触发器，出于某种原因，ie停止允许动画剪辑。我切换到不透明度，它再次工作：codepen.io/csuwldcat/pen/fpzga。我已经更新了答案中的代码以匹配。
@csuwldcat非常好的解决方案，我注意到内容只出现一小部分，然后就消失了，为什么会发生这种情况？这是可以避免的吗？
我想对此进行升级，但您没有回答如何使其工作的问题，而是共享了一个为使其工作而编写的插件。好奇的是，我们要对你的插件进行反向工程，这并不有趣。我希望你能更新你的答案来包含更多关于你的插件的功能和原因的解释。将代码更改为更具解释性。例如，您有一整段代码，它们只是写出静态CSS。我宁愿看到CSS，也不愿看到生成它的代码。您可以省去那些无聊的部分，比如重复所有浏览器前缀。

杰克对"最大高度动画"的回答很好，但我发现设置一个大的"最大高度"会导致延迟。

可以将可折叠的内容移动到一个内部分区中，并通过获取内部分区的高度来计算最大高度(通过jquery，它将是outerheight())。

1
2
3
4
5
6
7
8
9
10

$('button').bind('click', function(e) {
e.preventDefault();
w = $('#outer');
if (w.hasClass('collapsed')) {
w.css({"max-height": $('#inner').outerHeight() + 'px' });
} else {
w.css({"max-height":"0px" });
}
w.toggleClass('collapsed');
});

这里有一个jsFiddle链接：http://jsFiddle.net/pbatey/duzpt

下面是一个JSfiddle，它使用了所需的绝对最少的代码量：http://jsfidle.net/8ncjjxh8/

在@jake的答案上展开，转换将一直延伸到最大高度值，从而产生一个极快的动画-如果您同时设置了两种转换：悬停和关闭，那么您可以更大程度地控制疯狂的速度。

所以li:hover是当鼠标进入状态，然后在非hovered属性上的转换将是鼠标离开。

希望这会有所帮助。

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.sidemenu li ul {
max-height: 0px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
}
.sidemenu li:hover ul {
max-height: 500px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
/* Adjust speeds to the possible height of the list */

这是一把小提琴：http://jsfiddle.net/bukwj/

相关讨论

我意识到这个线程正在变老，但它在某些谷歌搜索中排名很高，所以我认为它值得更新。

您还可以获取/设置元素自身的高度：

1 2	var load_height = document.getElementById('target_box').clientHeight; document.getElementById('target_box').style.height = load_height + 'px';

您应该在内联脚本标记中的Target_Box结束标记之后立即转储此javascript。

相关讨论

我最近一直在转换li元素上的max-height，而不是包装ul。

理由是，与大的max-heights相比，小的max-heights的延迟远不明显(如果有的话)，我也可以设置我的max-height值相对于li的font-size而不是使用ems或rems来设置一些任意的大数字。

如果我的字体大小是1rem，我会将max-height设置为类似3rem的值(以适应换行文本)。您可以在这里看到一个示例：

http://codepen.io/mindfullselement/pen/dtzje

这里有一个我刚与jquery结合使用的解决方案。这适用于以下HTML结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

功能：

1
2
3
4
5
6
7
8
9
10
11

$('#main-nav li ul').each(function(){
$me = $(this);

//Count the number of li elements in this UL
var liCount = $me.find('li').size(),
//Multiply the liCount by the height + the margin on each li
ulHeight = liCount * 28;

//Store height in the data-height attribute in the UL
$me.attr("data-height", ulHeight);
});

然后，您可以使用click函数设置和删除高度，方法是使用css()。

1
2
3
4
5
6
7
8
9
10

$('#main-nav li a.main-link').click(function(){
//Collapse all submenus back to 0
$('#main-nav li ul').removeAttr('style');

$(this).parent().addClass('current');

//Set height on current submenu to it's height
var $currentUl = $('li.current ul'),
currentUlHeight = $currentUl.attr('data-height');
})

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

#main-nav li ul {
height: 0;
position: relative;
overflow: hidden;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter:"alpha(opacity=0)";
-khtml-opacity: 0;
-moz-opacity: 0;
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
-ms-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}

#main-nav li.current ul {
opacity: 1.0;
filter: alpha(opacity=100);
-ms-filter:"alpha(opacity=100)";
-khtml-opacity: 1.0;
-moz-opacity: 1.0;
}

.ie #main-nav li.current ul { height: auto !important }

#main-nav li { height: 25px; display: block; margin-bottom: 3px }

相关讨论

我能做到。我有一个.child和一个.parent分区。子分区与absolute位置完全符合父分区的宽度/高度。然后我设置translate属性的动画，将它的Y值向下推至100%。它的动画非常流畅，没有任何问题，也没有任何其他解决方案。

像这样，伪代码

1
2
3
4
5
6
7
8
9
10
11
12
13

.parent{ position:relative; overflow:hidden; }
/** shown state */
.child {
position:absolute;top:0;:left:0;right:0;bottom:0;
height: 100%;
transition: transform @overlay-animation-duration ease-in-out;
.translate(0, 0);
}

/** Animate to hidden by sliding down: */
.child.slidedown {
.translate(0, 100%); /** Translate the element"out" the bottom of it's .scene container"mask" so its hidden */
}

您可以在.parent上指定一个height，在px中指定一个%，或者保留为auto。当它滑下时，这个DIV会屏蔽掉.childDIV。

相关讨论

我没有详细阅读所有内容，但我最近遇到了这个问题，我做了如下操作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

div.class{
min-height:1%;
max-height:200px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
overflow:hidden;
}

div.class:hover{
min-height:100%;
max-height:3000px;
}

这允许您有一个DIV，它首先显示高达200px的内容，悬停时，其大小至少与该DIV的整个内容一样高。DIV不会变为3000px，但3000 px是我施加的限制。确保在non:hover上进行转换，否则可能会得到一些奇怪的渲染。这样，：hover继承自non:hover。

从px到%或到auto的转换不起作用。您需要使用相同的度量单位。这对我来说很好。使用HTML5使其完美……

记住，总有工作在身边…；)

希望有人觉得这个有用

似乎没有合适的解决办法。max-height方法相当好，但在隐藏阶段效果不佳-除非您知道内容的高度，否则会有明显的延迟。

我认为最好的方法是使用max-height，但只用于演出阶段。不要在隐藏时使用任何动画。在大多数情况下，这不应该是至关重要的。

max-height应该设置为相当大的值，以确保任何内容都适合。动画速度可以使用transition持续时间(speed = max-height / duration)来控制。速度不取决于内容的大小。显示整个内容所需的时间将取决于其大小。

1
2
3
4
5
6

document.querySelector("button").addEventListener(
"click",
function(){
document.querySelector("div").classList.toggle("hide");
}
)

1
2
3
4
5
6
7
8
9
10

div {
max-height: 20000px;
transition: max-height 3000ms;
overflow-y: hidden;
}

.hide {
max-height: 0;
transition: none;
}

1
2

<button>Toggle</button>
Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne. Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne. Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne. Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne. Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne. Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne. Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne. Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne. Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne.

我理解这个问题需要一个没有javascript的解决方案。但是对于那些感兴趣的人来说，这里是我的解决方案，只使用一点JS。

好的，那么元素的css(其高度默认会改变)被设置为height: 0;，当打开height: auto;时。它也有transition: height .25s ease-out;。但问题当然是，它不会向height: auto;或从height: auto;过渡。

因此，我所做的就是在打开或关闭时将高度设置为元素的scrollHeight属性。这种新的内联样式将具有更高的特异性，并覆盖height: auto;和height: 0;以及转换运行。

打开时，我添加了一个transitionend事件监听器，它只运行一次，然后删除内联样式，将其设置回height: auto;，这将允许元素在必要时调整大小，就像在这个更复杂的例子中，子菜单为https://codepen.io/ninjabonsai/pen/gzyve。

当关闭时，我会在下一个事件循环周期后立即使用setTimeout删除内联样式，不会延迟。这意味着height: auto;暂时被覆盖，允许转换回height 0;。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

1
2
3
4
5
6
7
8
9
10

#menu>ul {
height: 0;
overflow: hidden;
background-color: #999;
transition: height .25s ease-out;
}

#menu>ul.open {
height: auto;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

hover me

<ul>

<li>
item
</li>

<li>
item
</li>

<li>
item
</li>

<li>
item
</li>

<li>
item
</li>

</ul>

相关讨论

这并不是解决问题的"解决方案"，而是解决问题的方法。它只能与文本一起工作，但可以根据需要更改为与其他元素一起工作。

1
2
3
4
5
6
7

.originalContent {
font-size:0px;
transition:font-size .2s ease-in-out;
}
.show { /* class to add to content */
font-size:14px;
}

以下是一个例子：http://codepen.io/overthemike/pen/wzjrka

本质上，您将字体大小设置为0，并以足够快的速度将其转换为所需的高度，而不是最大高度或scaley()等。用css将实际高度转换为auto当前是不可能的，但是在is中转换内容，因此字体大小转换。

注意-代码笔中有JavaScript，但它的唯一目的是在单击手风琴时添加/删除CSS类。这可以通过隐藏的单选按钮来完成，但我并没有集中于此，只是高度转换。

将高度设置为自动并转换最大高度。

在铬V17上测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

div {
position: absolute;
width:100%;
bottom:0px;
left:0px;

background:#333;
color: #FFF;

max-height:100%; /**/
height:auto; /**/

-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.close {
max-height:0%; /**/
}

相关讨论

如果硬编码提供的最大高度值不大于实际高度(否则会出现不希望出现的延迟和时间问题)。另一方面，如果硬编码值意外为不超过实际高度的元素不会完全打开。

以下仅限CSS的解决方案还需要硬编码的大小应该比实际尺寸大。然而这如果实际大小在某些情况下大于硬编码的大小。在这种情况下，过渡可能会有点跳跃，但它不会留下部分可见的元素。因此，此解决方案也可用于未知内容，例如一个数据库，你只知道它的内容通常不大X像素以上，但也有例外。

我们的想法是用一个负的值作为保证金底部(或保证金顶部稍微不同的动画)并将内容元素放入溢出的中间元素：隐藏。内容的负边缘元素，因此减少中间元素的高度。

以下代码在页边距底部使用从-150px到0px。只要内容元素不是高于150像素。此外，它使用最大高度的过渡中间元素从0px到100%。这最后隐藏了中间元素如果含量元素高于150px。对于最大高度，过渡仅用于延迟其应用关闭时的一秒钟，不会产生平滑的视觉效果(因此，它可以从0px运行到100%。

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.content {
transition: margin-bottom 1s ease-in;
margin-bottom: -150px;
}
.outer:hover .middle .content {
transition: margin-bottom 1s ease-out;
margin-bottom: 0px
}
.middle {
overflow: hidden;
transition: max-height .1s ease 1s;
max-height: 0px
}
.outer:hover .middle {
transition: max-height .1s ease 0s;
max-height: 100%
}

HTML：

1
2
3
4
5
6
7
8

Sample Text
Sample Text
Sample Text
Sample Test of height 150px
Sample Text

Hover Here

保证金底部的值应为负值，并尽可能接近可能达到内容元素的实际高度。如果它离开了值)越大，与最大高度解决方案，但只要硬编码的大小并不比实际大小大多少。如果绝对页边距底部的值小于实际高度Tanposition跳了一点。在任何情况下，在过渡之后内容元素要么完全显示，要么完全删除。

有关更多详细信息，请参阅我的博客文章http://www.taccgl.org/blog/css-transition-display.html combined-height

这是我经常解决的问题

http://jsfiddle.net/ipeshev/d1dfr0jz/

尝试将关闭状态的延迟设置为某个负数，并用该值播放一点。你会看到区别的。它几乎可以用来欺骗人眼；)。

它可以在主要浏览器中使用，但对我来说已经足够好了。这很奇怪，但给出了一些结果。

1
2
3
4
5
6
7
8
9
10

.expandable {
max-height: 0px;
overflow: hidden;
transition: all 1s linear -0.8s;
}

button:hover ~ .expandable {
max-height: 9000px;
transition: all 1s ease-in-out;
}

相关讨论

小javascript+scss解决方案

我通常使用一个完全不同的视角和一个(非常)小的javascript。问题是：

我们真正想要的是改变身高
高度是子菜单中所有列表项的总和。
我们通常知道列表项的高度，因为我们正在设计它

所以我的解决方案适用于"普通"子菜单，其中项目名称只有一行。不管怎样，只要多加一点JS，就可以容纳多个行名称。

基本上，我只需要计算子菜单项并相应地应用特定类。然后把球传给CSS。例如：

1
2
3
4
5
6

var main_menu = $('.main-menu');
var submenus = $('.main-menu').find('.submenu');
submenus.each(function(index,item){
var i = $(item);
i.addClass('has-' + i.find('li').length + '-children');
});

显然，您可以使用任何类/选择器。现在我们有这样的子菜单：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

我们的CSS是这样的：

1
2
3
4
5
6

.submenu{
//your styles [...]
height:0;
overflow:hidden;
transition: all 200ms ease-in-out; //assume Autoprefixer is used
}

我们还将有一些类似这样的SCSS变量(任意示例)：

1 2	$sub_item_height:30px; $sub_item_border:2px;

此时，假设打开的主菜单项将获得类似"opened"或类似的类(您的implementations….)，我们可以这样做：

1
2
3
4
5
6
7

//use a number of children reasonably high so it won't be overcomed by real buttons
.main-menu .opened .submenu{
&.has-1-children{ height: $sub_item_height*1 + $sub_item_border*1; }
&.has-2-children{ height: $sub_item_height*2 + $sub_item_border*2; }
&.has-3-children{ height: $sub_item_height*3 + $sub_item_border*3; }
//and so on....
}

或者，缩短：

1
2
3
4
5

.main-menu .opened .submenu{
@for $i from 1 through 12{//12 is totally arbitrary
&.has-#{$i}-children { height: $menu_item_height * $i + $menu_item_border * $i; }
}
}

在大多数情况下，这将起到作用。希望它有帮助！

这就是我的工作：

1
2
3
4
5
6
7
8
9
10

.hide{
max-height: 0px;
overflow: hidden;
transition:max-height .5s ease-in-out;
}

.show{
max-height: 150px; // adjust as needed
transition: max-height .5s ease-in-out;
}

您需要将它们放入所有子组件中，并使用jquery或react状态切换它们，这里是我的示例(使用next.js和样式化组件)：https://codesandbox.io/s/ol3kl56q9q

你用下面的东西代替高度怎么样

1
2
3
4
5
6
7
8
9
10
11
12

#child0 {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
position: absolute;
}

#parent0:hover #child0 {
visibility: visible;
opacity: 1;
position: relative;
}

效果也很好。请添加前缀。希望这能帮助别人。

附言：如果你还需要高度0来获得某种黑色魔法，你可以把height: 0;加到#child0上，然后把height: inherit加到#parent0:hover #child0上。同时，您可以单独或只为所有人添加高度过渡。

相关讨论

查看我关于一个相关问题的帖子。

基本上，从height: 0px;开始，让它转换到由javascript计算的精确高度。

1
2
3
4
5
6
7
8
9

function setInfoHeight() {
$(window).on('load resize', function() {
$('.info').each(function () {
var current = $(this);
var closed = $(this).height() == 0;
current.show().height('auto').attr('h', current.height() );
current.height(closed ? '0' : current.height());
});
});

每当页面加载/调整大小时，类为info的元素将更新其h属性。然后按钮触发style="height: __"将其设置为之前设置的h值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function moreInformation() {
$('.icon-container').click(function() {
var info = $(this).closest('.dish-header').next('.info'); // Just the one info
var icon = $(this).children('.info-btn'); // Select the logo

// Stop any ongoing animation loops. Without this, you could click button 10
// times real fast, and watch an animation of the info showing and closing
// for a few seconds after
icon.stop();
info.stop();

// Flip icon and hide/show info
icon.toggleClass('flip');

// Metnod 1, animation handled by JS
// info.slideToggle('slow');

// Method 2, animation handled by CSS, use with setInfoheight function
info.toggleClass('active').height(icon.is('.flip') ? info.attr('h') : '0');

});
};

这是info类的样式。

1
2
3
4
5
6
7
8
9
10
11
12

.info {
padding: 0 1em;
line-height: 1.5em;
display: inline-block;
overflow: hidden;
height: 0px;
transition: height 0.6s, padding 0.6s;
&.active {
border-bottom: $thin-line;
padding: 1em;
}
}

跨浏览器可能不支持样式。以下是此代码的实时示例：

这是我的解决方案。以前的最大高度和巨大的数字是好的，但对我来说还不够，因为动画在较小的文本量上有问题。我的代码动态地获取内容需要的放置量，并将其放到atribute中。

1
2
3
4
5
6
7
8
9
10
11
12
13

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.block-of-text{
width:200px;
max-height:150px;
padding:25px;
background:rgba(0,0,255,0.6);
transition:0.4s;
color:white;
display:inline-block;
overflow:hidden;
}
#unroll{
position:absolute;
left:280px;
background:transparent;
color:blue;
border:2px solid blue;
transition:0.4s;
top:20px;
}
#unroll:hover{
background:blue;
color:white;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这个解决方案使用JavaScript，但它非常简单，而且工作得很好。

HTML：

1
2
3
4
5
6
7
8

<button>Toggle</button>

Lorem
Ipsum
Dolor
Sit
Amet

CSS：

1
2
3
4
5
6
7
8
9
10

.container
{
overflow: hidden;
transition: 0.5s ease;
}

.container.collapsed
{
height: 0 !important;
}

Javascript：

1
2
3
4
5
6
7

$("button").click(
function ()
{
var height = $(".content").height();
$(".container").css({height: height});
$(".container").toggleClass("collapsed");
});

http://jsfiddle.net/r109uz7m/(包括下面解释的缺点的解决方法)：

唯一的缺点是，如果容器中的内容发生更改，则需要刷新容器的大小。在大多数用例中，您可以绕过这个限制(就像在JSfiddle中一样)。

相关讨论

你所缺少的是这个问题被标记为CSS，标题上写着"使用CSS"。
好吧，你所缺少的是没有javascript就没有可能解决这个问题的方法。这里提出的大多数答案，特别是最热门的答案，都使用了javascript，但使用的方式要比这里提出的解决方案复杂得多。我希望你对其他所有使用javascript的答案都投了反对票。
是的，但是你错了，没有javascript就没有可能解决这个问题。例如，粗略地看一下被接受的答案(得分接近1000分)，就会知道这一点。更不用说所有其他仅限于CSS的答案了。
使用CSS的解决方案充其量是一种变通方法(例如，粗略地看一下该答案的注释，就会知道这一点)，因为使用页边距顶部或最小高度进行转换有许多缺点。已经停止恶意。
这里唯一的恶意是用一种完全忽略问题参数的方法回答一个6岁的问题。
我的答案中有一个是非常不可信的。
再次阅读这个问题，并告诉我它写在哪里："不允许使用javascript或被否决！"。此解决方案使用CSS转换，并更正高度：javascript的自动问题。所有其他使用javascript的答案都使用了一种不必要的更复杂的方法来获得相同的结果，但仍然得到了上票，所以这个答案会自动变得相关。
当答案无效时，投反对票。另外，读一读什么是恶意。对一个不合理的否决票进行报复几乎不是不道德的。
关于堆栈溢出的问题需要为主题和SEO标记。它们还需要标题。在这个问题的标题及其标签中，您可以看到CSS是被指定的。此外，问题正文中还指定了"in css"。你怎么能说JS的答案是可以的，坦白地说，是荒谬的。此外，答案的分数不会自动使其相关。
至于投票结果，你是对的。不仅是报复投票不实和不诚实(例如不真实和欺骗性)。毕竟，在一个完全独立的问题上，100%投票赞成的答案与你的答案有什么关系？没有)，这也违反了堆栈溢出的规则。我在这里投反对票是为了表明这个答案是没有用的。问题场景正在尝试使用CSS。这个答案使用了javascript，因此没有用处。我的回答是，你投了反对票来进行小规模的报复，这对它的问题很有帮助，所以这是两种恶意的帮助。
你不应该因为别人拿你的假互联网积分而去报复别人，而应该更关心为什么有人对你的答案投了反对票。
有用与否取决于它是否帮助人们解决他们的问题。我浪费了很多时间浏览这个问题的所有答案，结果发现我不得不花更多的时间来研究和编写自己的解决方案，因为它们都不够好。所以我把它放在这里。如果它已经在那里，它肯定会对我有用，而且对其他人，看到更高的答案是必要的。但不管怎样。最后一句话就是"对"。我可以确定这就是你想要的。

短代码示例：

1
2
3
4
5
6
7
8
9
10
11
12

.slider ul {
overflow: hidden;
-webkit-transition: max-height 3.3s ease;
}

.slider.hide ul {
max-height: 0px;
}

.slider.show ul {
max-height: 1000px;
}

我通过将最大高度设置为"无"，获取高度，将最大高度重新设置为计算出的高度来实现这一点。为我工作得很好。我在一个手风琴菜单上找到了这个，用

作为切换开关，在内部扩展。
JS：

1
2
3
4
5
6
$('h5').click(function(e) {
$(this).parent('div').addClass('temp_expanded');
var getheight = ($(this).parent('div').find('div').height());
$(this).parent('div').removeClass('temp_expanded');
$(this).parent('div').find('div').css('max-height', getheight);
});

较少：

1
2
3
4
5
6
7
8
9
10
11
12
div {
> div {
max-height: 0px;
overflow: hidden;
.transition(all 0.3s ease-in-out);
}

&.temp_expanded {
> div {
max-height: none;
}
}

相关讨论

哦，和lesshat，用于供应商对过渡段的预混合。

我今天研究这个问题已经有一段时间了，发现了这个解决方案：
使用"最大高度"，并根据容器内容物的计算高度动态设置最大高度。

1
2
3
$(obj).children().each(function(index, element) {
InnerHeight += $(this).height();
});

要将动画设置为全尺寸：

1
$(obj).removeClass('collapsed').css('max-height', InnerHeight);

要将动画设置为较小的大小，请执行以下操作：

1
$(obj).removeClass('collapsed').css('max-height', MySmallerHeight);

使用CSS3过渡：最大高度；
这样，你就可以避免从一个高度到另一个高度的浮华动画，也不会有剪辑内容的风险。

我遇到了这个问题，找到了解决办法。
首先，我尝试使用max-height。但有两个问题：

我不太确定什么是max-height，因为我正在扩展一个未知长度的文本块。

如果我把max-height设置得太大，崩溃时会有很大的延迟。

然后，我的解决方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function toggleBlock(e) {
var target = goog.dom.getNextElementSibling(e.target);
if (target.style.height && target.style.height !="0px") { //collapsing
goog.style.setHeight(target, target.clientHeight);
setTimeout(function(){
target.style.height ="0px";
}, 100);
} else { //expanding
target.style.height ="auto";
//get the actual height
var height = target.clientHeight;
target.style.height ="0px";
setTimeout(function(){
goog.style.setHeight(target, height);
}, 100);
setTimeout(function(){
//Set this because I have expanding blocks inside expanding blocks
target.style.height="auto";
}, 600); //time is set 100 + transition-duration
}
}

SCS:

1
2
3
4
5
6
div.block {
height: 0px;
overflow: hidden;
@include transition-property(height);
@include transition-duration(0.5s);
}

我也用jquery做了这个。在我的例子中，我想看一点其他菜单(10px)。因此，这在没有JavaScript的情况下工作(但也没有转换)。

1
2
3
4
5
6
7
8
9
10
#menu li ul {
list-style: none;
height: 10px;
overflow: hidden;
margin: 0;
padding: 0;
}
#menu li:hover ul {
height: 100%;
}

这是我的JS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//Save the height set in css (10px)
var csshoehe = $("ul li ul").height();

// Open all the menus
$("ul li ul").css("height","100%");

//Save each height in data-attribute
//then shrink it down again
$.each($("ul li ul"), function(){
var hoehe = $(this).height();
$(this).data("hoehe", hoehe);
$(this).css("height", csshoehe);
});

$("ul li").hover(
function(){
var orig = $(this).children("ul").data("hoehe");
$(this).children("ul").stop(true,false).delay(150).animate({"height": orig});
}, function(){
$(this).children("ul").stop(true,false).delay(400).animate({"height": csshoehe});
});

希望这能帮助别人：)

这就是我一直使用的。
基本上，我会得到所有子元素的高度，对它们求和，然后设置元素的最大高度，覆盖类(您可以创建自己的类，这样您就可以拥有不同的实例)。
过来看。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!doctype html>
<html>

<head>
<style>
/* OVERFLOW HIDDEN /
.overflowHidden{
overflow: hidden;
}

/ HEIGHT */
.transitionHeight{
-webkit-transition: max-height 250ms ease-in-out;
-moz-transition: max-height 250ms ease-in-out;
-o-transition: max-height 250ms ease-in-out;
-ms-transition: max-height 250ms ease-in-out;
transition: max-height 250ms ease-in-out;
}
.heightAnimOff{
height: auto;
max-height: 0px;
}
.heightAnimOn{
height: auto;
max-height: 20000px;
}

</style>
<script src="jquery_1.8.3.min.js" type="text/javascript">
<script type="text/javascript">
(function($){
$.toggleAnimHeight = function(alvo, velha, nova){
if ( $(alvo).attr("data-maxHeight") != null ){
}else{
var totalH = 0;
$(alvo).children().each(function(){
totalH += $(this).height();
});
$(alvo).attr("data-maxHeight", totalH)
$("head").append('<style> .'+nova+'{ max-height: '+totalH+'px; } </style>');
}
if ( $(alvo).attr("class").indexOf(nova) == -1 ){
$(alvo).removeClass(velha);
$(alvo).addClass(nova);
}else {
$(alvo).removeClass(nova);
$(alvo).addClass(velha);
}
}
}(jQuery));

</head>

<body>

<button onmousedown="$.toggleAnimHeight( $('#target1'), 'heightAnimOff', 'heightAnimOn' );">Anim Toggle</button>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id pretium enim, quis faucibus urna. Phasellus blandit nisl eget quam mollis vulputate. Sed pulvinar eros vitae neque volutpat, vitae suscipit urna viverra. Etiam rhoncus purus vitae tortor pulvinar, sed vulputate arcu convallis. Sed porta, mi consectetur convallis semper, odio mauris iaculis purus, non tempor purus augue pharetra lorem. Integer dictum lacus arcu. Vivamus metus lorem, fermentum ac egestas ac, ornare non neque. Aenean ullamcorper adipiscing ante, et mollis orci feugiat et.
</p>

<p>
Praesent pretium sit amet eros et lacinia. Etiam nec neque ullamcorper, sagittis quam vitae, dictum ipsum. Sed volutpat lorem libero, nec commodo magna posuere rutrum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque id erat odio. Sed faucibus sem eu tortor laoreet pulvinar. Praesent pharetra risus eget metus vulputate, eget condimentum leo consequat. Praesent consequat rutrum convallis.
</p>

<p>
Aenean euismod metus quis libero commodo, tristique cursus odio vestibulum. Donec quis lobortis arcu, eu luctus diam. In eget nisi non mauris commodo elementum. Sed gravida leo consequat, tempus orci eu, facilisis ipsum. Cras interdum sed odio vel tincidunt. Morbi arcu ipsum, ultricies dictum enim quis, varius dignissim massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper, magna eu aliquam luctus, leo purus accumsan massa, at auctor dui dolor eu augue. Maecenas ultrices faucibus ante non mattis.
</p>

<p>
Pellentesque ut est tortor. Quisque adipiscing ac nisi vel interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut facilisis ante sollicitudin vehicula ornare. Quisque sagittis diam nibh, ac imperdiet nibh pulvinar eu. Integer at ipsum a purus tristique porttitor vitae in ante. Sed arcu neque, lacinia eu dolor nec, pellentesque interdum tortor. Morbi ornare aliquet aliquam. Aenean egestas, erat vel tempus mollis, est eros iaculis enim, quis fringilla purus tortor sollicitudin erat. Donec ultrices elit metus, sed iaculis mi dignissim vulputate. Donec adipiscing imperdiet porttitor. Sed ac lacus adipiscing, sagittis sem quis, tincidunt metus. Curabitur vitae augue a dolor scelerisque lobortis ut a nisi.
</p>

<p>
Quisque sollicitudin diam sit amet dui sollicitudin, ac egestas turpis imperdiet. Nullam id dui at lectus ultrices aliquam. Nam non luctus tortor, vitae elementum elit. Nullam id bibendum orci. Aliquam hendrerit nisi vitae tortor mollis, nec aliquam risus malesuada. In scelerisque nisl arcu, sit amet tincidunt libero consequat pharetra. Quisque aliquam consectetur purus nec sollicitudin. Pellentesque consectetur eleifend tortor in blandit. Pellentesque euismod justo sed lectus congue, ut malesuada diam rhoncus. Nulla id tempor odio. Nulla facilisi. Phasellus lacinia neque in nisi congue aliquet. Aliquam malesuada accumsan mauris eget mattis. Maecenas pellentesque, sem sed ultricies ullamcorper, massa enim consectetur magna, eget sagittis lorem leo vel arcu. Cras ultrices nunc id risus commodo laoreet. Proin nisl nulla, elementum ac libero sed, aliquam mollis massa.
</p>

</body>

</html>

如果"li">30件，那么包装高度将大于500px。我的回答是：

1
2
3
ul{width:100%}
li{height:0;overflow:hidden;background:#dedede;transition:.2s.4s linear}
ul:hover li{height:20px}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<ul>
Hover me

<li>
Juice
</li>

<li>
Tea
</li>

<li>
Milk
</li>

<li>
Coffee
</li>

</ul>