我正在尝试使用CSS转换制作一个＜ul＞幻灯片。
＜ul＞开始于高度：0；。悬停时，高度设置为height:auto；。然而，这导致它简单地出现，
如果我从高度做：40px；至高度：自动；，那么它将向上滑动到高度：0；，然后突然跳到正确的高度。
如果不使用JavaScript，我怎么能做到这一点？
#子0{高度：0；溢出：隐藏；背景色：#dedede；-moz过渡：高度1s容易；-webkit过渡：高度1s轻松；-o过渡：高度1s容易；过渡：高度1s；}#parent0:悬停#child0{高度：自动；}#孩子40{高度：40px；溢出：隐藏；背景色：#dedede；-moz过渡：高度1s容易；-webkit过渡：高度1s轻松；-o过渡：高度1s容易；过渡：高度1s；}#parent40:悬停#child40{高度：自动；}h1小时{字号：粗体；}两个CSS片段之间的唯一区别是一个高度为0，另一个高度是40。<小时><div id=“parent0”><h1>将我悬停（高度：0）</h1><div id=“child0”>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br></div></div><小时><div id=“parent40”><h1>将我悬停（高度：40）</h1><div id=“child40”>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br></div></div>
编辑：向下滚动以获得更新的答案我在做一个下拉列表，看到了这篇文章。。。很多不同的答案，但我决定分享我的下拉列表。。。它并不完美，但至少它将只使用css进行下拉！我一直在使用transform:translateY（y）将列表转换为视图。。。你可以在测试中看到更多http://jsfiddle.net/BVEpc/4/ 我把div放在每一个li后面，因为我的下拉列表是从上到下的，为了正确地显示它们，这是需要的，我的div代码是：
#menu div {
transition: 0.5s 1s;
z-index:-1;
-webkit-transform:translateY(-100%);
-webkit-transform-origin: top;
}
并且悬停是：
#menu > li:hover div {
transition: 0.5s;
-webkit-transform:translateY(0);
}
因为ul高度设置为可以超过你身体内容的内容，所以我为ul做了这件事：
#menu ul {
transition: 0s 1.5s;
visibility:hidden;
overflow:hidden;
}
并悬停：
#menu > li:hover ul {
transition:none;
visibility:visible;
}
转换后的第二次是延迟，它将在我的下拉列表被动画关闭后隐藏。。。希望以后有人能从中受益。编辑：我真不敢相信人们真的使用了这个原型！此下拉菜单仅用于一个子菜单，仅此而已！！我更新了一个更好的，可以有两个子菜单，用于ltr和rtl方向，支持IE8。LTR的FiddleRTL的Fiddle希望将来有人会发现这很有用。
使用CSS3过渡设置高度动画的一个视觉解决方法是设置填充动画。
你不太能得到完全的擦除效果，但在过渡持续时间和填充值之间进行切换应该会让你足够接近。如果您不想显式设置高度/最大高度，这应该是您想要的。
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上方的stephband上重复）
编辑：向下滚动以获得更新的答案我在做一个下拉列表，看到了这篇文章。。。很多不同的答案，但我决定分享我的下拉列表。。。它并不完美，但至少它将只使用css进行下拉！我一直在使用transform:translateY（y）将列表转换为视图。。。你可以在测试中看到更多http://jsfiddle.net/BVEpc/4/ 我把div放在每一个li后面，因为我的下拉列表是从上到下的，为了正确地显示它们，这是需要的，我的div代码是：
#menu div {
transition: 0.5s 1s;
z-index:-1;
-webkit-transform:translateY(-100%);
-webkit-transform-origin: top;
}
并且悬停是：
#menu > li:hover div {
transition: 0.5s;
-webkit-transform:translateY(0);
}
因为ul高度设置为可以超过你身体内容的内容，所以我为ul做了这件事：
#menu ul {
transition: 0s 1.5s;
visibility:hidden;
overflow:hidden;
}
并悬停：
#menu > li:hover ul {
transition:none;
visibility:visible;
}
转换后的第二次是延迟，它将在我的下拉列表被动画关闭后隐藏。。。希望以后有人能从中受益。编辑：我真不敢相信人们真的使用了这个原型！此下拉菜单仅用于一个子菜单，仅此而已！！我更新了一个更好的，可以有两个子菜单，用于ltr和rtl方向，支持IE8。LTR的FiddleRTL的Fiddle希望将来有人会发现这很有用。
这并不是问题的“解决方案”，而是一种变通方法。它只在用文本编写时有效，但可以根据需要更改为使用其他元素。
.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目前是不可能的，但转换内容是可能的，因此字体大小转换。
注意-代码笔中有javascript，但它的唯一目的是在手风琴上单击时添加/删除css类。这可以通过隐藏的单选按钮来完成，但我并没有专注于此，只是高度转换。
我能够做到这一点。我有一个.child和一个.parent div。子div完全符合父div的宽度/高度，具有绝对定位。然后设置平移属性的动画，将其Y值降低100%。它的动画非常流畅，没有任何问题或缺点，就像这里的任何其他解决方案一样。
类似这样，伪代码
.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上指定一个高度，单位为px，%，或保留为auto。这个div然后在向下滑动时屏蔽掉.child div。
杰克对最大高度动画化的回答很好，但我发现设置大的最大高度所导致的延迟很烦人。
可以将可折叠内容移动到内部div中，并通过获取内部div的高度来计算最大高度（通过JQuery，它将是outerHeight（））。
$('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://jsfiddle.net/8ncjjxh8/
