我正在尝试使用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>
你可以，用一点非语义的小把戏。我通常的方法是设置外部DIV的高度动画，该外部DIV有一个子级，这是一个仅用于测量内容高度的无样式DIV。
函数growDiv（）{var growDiv=文档.getElementById（'grow'）；if（growtDiv.clientHeight）{growtDiv.style.height=0；}其他{var wrapper=document.querySelector（'.measureingWrapper'）；growDiv.style.height=wrapper.clientHeight+“px”；}}#成长{-moz过渡：高度.5s；-ms过渡：高度.5s；-o过渡：高度.5s；-webkit过渡：高度.5s；过渡：高度.5s；高度：0；溢出：隐藏；轮廓：1px纯红色；}<input type=“button”onclick=“growDiv（）”value=“grow”><div id='grow'><div class='measureingWrapper'>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div></div></div>
人们希望能够省去.metringWrapper，只需将DIV的高度设置为auto并设置动画，但这似乎不起作用（设置了高度，但没有动画发生）。
函数growDiv（）{var growDiv=文档.getElementById（'grow'）；if（growtDiv.clientHeight）{growtDiv.style.height=0；}其他{growDiv.style.height=“自动”；}}#成长{-moz过渡：高度.5s；-ms过渡：高度.5s；-o过渡：高度.5s；-webkit过渡：高度.5s；过渡：高度.5s；高度：0；溢出：隐藏；轮廓：1px纯红色；}<input type=“button”onclick=“growDiv（）”value=“grow”><div id='grow'>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div></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/
Jake的最大高度解决方案效果很好，如果硬编码提供的最大高度值不比实际高度大多少（因为否则会出现不期望的延迟和定时问题）。另一方面，如果硬编码值意外为不大于实际高度，元件将不会完全打开。
以下仅限CSS的解决方案还需要硬编码大小应大于大多数实际尺寸。然而，这如果实际大小在某些情况下大于硬编码大小。在这种情况下，转换可能会跳一点，但它永远不会留下部分可见的元素。因此，该解决方案也可用于未知内容，例如数据库，您只需知道内容通常不会更大超过x像素，但也有例外。
想法是使用负值作为边距底部（或边距顶部用于稍微不同的动画），并将内容元素放置到带溢出的中间元素：隐藏。内容的负边距因此减小了中间元件的高度。
以下代码使用边距底部从-150px到0倍。只要内容元素不是高于150px。此外，它使用最大高度上的过渡中间元素从0px到100%。这最终隐藏了中间元素如果内容元素高于150px。对于最大高度，过渡仅用于延迟其应用关闭时一秒钟，而不是为了平滑的视觉效果(因此它可以从0px运行到100%）。
CSS:
.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格式：
<div class="outer">
<div class="middle">
<div class="content">
Sample Text
<br> Sample Text
<br> Sample Text
<div style="height:150px">Sample Test of height 150px</div>
Sample Text
</div>
</div>
Hover Here
</div>
边距底部的值应为负值，并尽可能接近可能达到内容元素的实际高度。如果是绝对的值）越大，则存在与最大高度解决方案，但只要硬编码的大小并不比实际大小大多少。如果绝对值边距底部的值小于变换有点跳跃。在任何情况下，过渡后内容元素被完全显示或完全移除。
有关详细信息，请参阅我的博客文章http://www.taccgl.org/blog/css_transition_display.html#combined_height
仅限CSS的灵活高度解决方案
我偶然发现了一个使用灵活行为的奇怪解决方案。它至少适用于Chrome和Firefox。
首先，高度转换仅在0和100%之间有效，两个数值。由于“auto”不是数值，因此分数在0和“自动”之间不存在增量。100%是灵活的值，因此不需要特定高度。其次，隐藏内容的外部容器和内部容器都必须设置为display：flex with flex direction：column。第三，外部容器必须具有高度属性。仅当所有内容都包含在外部容器中时，将其设置为0才能保持平滑过渡，因为弯曲行为优先于高度。Edit:Json建议使用height:fit内容，这样容器下面的任何内容都会被向下推。
.外部容器｛高度：0；显示：flex；flex方向：列；｝.内部容器｛display：flex；flex direction:column；｝.隐藏内容｛高度：0；不透明度：0；过渡：高度1s 0.5s进出，不透明度0.5s进出；/*过渡淡出：首先淡出不透明度，然后在延迟等于不透明度持续时间后收缩高度*/}.t触发器：悬停+.内部容器>.隐藏内容｛高度：100%；不透明度：1；过渡：高度1s进出，不透明度0.5s 1s进出；/*过渡：首先展开高度，然后在等于高度持续时间的延迟后淡入不透明度*/}<div class=“outer container”><a href=“#”class=“trigger”>悬停以显示内部容器的隐藏内容</a><div class=“内部容器”><div class=“hidden content”>这是隐藏内容。当由悬停触发时，其高度从0过渡到100%，这会将同一容器中的其他内容逐渐向下推</分区>＜div＞在同一个容器中，当隐藏内容的高度从0过渡到100%时，其他内容会逐渐向下推</分区></div></div>
按“运行代码段”按钮查看正在运行的转换。它只是CSS，没有特定的高度。
我使用的方法是基于字体大小（使用em作为单位）或至少是影响我们想要动画的框的垂直大小的所有内容。然后，如果有任何东西不是以em为单位（例如1px边框），我会在框关闭时将其设置为0，并将所有子对象设置为*。
动画动画显示的是从0到100的字体大小（%）。什么？父级的已知字体大小。
它工作的规则是，动画框中的所有内容必须：
对所有字体大小和行高使用%将em用于所有垂直方向（如高度、边距和顶部/底部填充等）如果将px用于垂直的内容（例如，边框顶部/底部），则在框关闭时应覆盖该内容（例如：边框顶部：0；边框底部：0；）
在某种程度上，您仍然可以使用像素作为参考单位，只需将包装字体大小设置为100px，例如#page｛font-size:100px；｝，因此如果您希望在内部任何地方使用10px，则可以使用0.1em。
这不是任何人都能写的最漂亮的东西，但嘿，这些浏览器并不能为我们提供任何解决这个问题的漂亮方案。一旦箱子的高度无法预测，我们别无选择，只能弄得有些脏，这是我想到的最不脏的东西。
悬停版本：
https://jsfiddle.net/xpsfkb07/1/
#第页{字体大小：calc（（35vw+65vh）/30）；/*只是一些响应性设计作为奖励*/}#滑动轴承箱{背景色：#e8e8e8；可见性：隐藏；字号：0；/*从0到100%设置动画*/不透明度：0；/*可选的*/过渡：0.5s；}a#ahover：悬停~#slidebox{可见性：可见；字体大小：100%；/*从0到100%设置动画*/不透明度：1；/*可选的*/}a#ahover：not（：hover）~#slidebox*{边框顶部：0；边框底部：0；/*在这里放置任何以像素为单位的垂直线，在本例中为边框*/}a#按钮{显示：内联flex；对齐项目：居中；对齐内容：中心；位置：相对；宽度：20em；高度：3em；填充：0.5em；边框：2px实心#0080ff；边界半径：0.4em；背景色：#8fbfef；颜色：#404040；框大小调整：边框框；}#某种形式的{页边距：1em；边距底部：1em；填充：1 m 4 m 1 m 4 mm；背景色：#d8ffd8；边框：1px实心#888888；}#某种形式的输入{显示：内联块；框大小调整：边框框；字体大小：125%；填充：0.5em；宽度：50%；/*任何水平的都可以是px或%*/边界半径：0.4em；边框：1px纯红色；}＜div id＝page＞<a id=ahover href=“#”>悬停我</a><br>下面是滑动框：＜div id＝slidebox＞我是幻灯片框的内容（第1行）<br>我是幻灯片框的内容（第2行）<br><a id=button href=“#”>我是幻灯片框中的某个按钮</a><br>我是幻灯片框的内容（第3行）<br>我是幻灯片框的内容（第4行）。＜div id＝someform＞一个有表格的盒子<br><输入类型=文本值=“文本框”></div>我是幻灯片框的内容（第5行）<br>我是幻灯片框的内容（第6行）。</div>这是在盒子后面。</div>
类别更改版本：
https://jsfiddle.net/8xzsrfh6/
const switch_ele=文档.getElementById（'aclass'）；switch_ele.addEventListener（'click'，函数（）{const box_ele=文档.getElementById（'slidebox'）；box_ele.className=box_ele_className=='显示'？'hide'：'显示'；}，true）；#第页{字体大小：calc（（35vw+65vh）/30）；/*只是一些响应性设计作为奖励*/}#滑动轴承箱{背景色：#e8e8e8；可见性：隐藏；字号：0；/*从0到100%设置动画*/不透明度：0；/*可选的*/转换：.5s；}#幻灯片放映{可见性：可见；字体大小：100%；/*从0到100%设置动画*/不透明度：1；/*可选的*/}#幻灯片隐藏*{边框顶部：0；边框底部：0；/*在这里放置任何以像素为单位的垂直线，在本例中为边框*/}a#按钮{显示：内联flex；对齐项目：居中；对齐内容：中心；位置：相对；宽度：20em；高度：3em；填充：0.5em；边框：2px实心#0080ff；边界半径：0.4em；背景色：#8fbfef；颜色：#404040；框大小调整：边框框；}#某种形式的{页边距：1em；边距底部：1em；填充：1 m 4 m 1 m 4 mm；背景色：#d8ffd8；边框：1px实心#888888；}#某种形式的输入{显示：内联块；框大小调整：边框框；字体大小：125%；填充：0.5em；宽度：50%；/*任何水平的都可以是px或%*/边界半径：0.4em；边框：1px纯红色；}＜div id＝page＞<a id=aclass href=“#”>开关类w/js</a><br>下面是滑动框：＜div id＝slidebox class＝hide＞我是幻灯片框的内容（第1行）<br>我是幻灯片框的内容（第2行）<br><a id=button href=“#”>我是幻灯片框中的某个按钮</a><br>我是幻灯片框的内容（第3行）<br>我是幻灯片框的内容（第4行）。＜div id＝someform＞一个有表格的盒子<br><输入类型=文本值=“文本框”></div>我是幻灯片框的内容（第5行）<br>我是幻灯片框的内容（第6行）。</div>这是在盒子后面。</div>
