我正在尝试使用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>
我使用的方法是基于字体大小（使用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>
使用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上重复）
扩展@jake的答案，过渡将一直到最大高度值，从而产生极快的动画效果-如果您同时设置了悬停和关闭两种过渡，则可以进一步控制疯狂的速度。
因此，li:hover是指鼠标进入状态，然后非悬停属性上的转换将是鼠标离开。
希望这会有所帮助。
例如：
.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/
根据MDN Web Docs，CSS转换规范中故意排除了auto值，因此在网格和柔性布局中使用height:100%、top或flex属性，而不是height:auto。
展开/折叠覆盖
.grid容器{显示：栅格；位置：绝对；}.内容{背景：浅绿色；高度：0；溢出：隐藏；过渡：1s；}span:hover+.gridcontainer.content{高度：100%；}<span>悬停在我上方</span><div class=“grid container”><div class=“content”>Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯，quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外，你还得承担责任，这是因为你在实验室里表现得很糟糕</分区></div><p>其余页面内容</p＞
展开/折叠滑动覆盖
.grid容器{显示：栅格；位置：绝对；溢出：隐藏；指针事件：无；/*以实现与容器下方元素的交互*/}.内容{背景：浅绿色；指针事件：自动；位置：相对；顶部：-100%；过渡：1s；}span:hover+.gridcontainer.content{顶部：0；}<span>悬停在我上方</span><div class=“grid container”><div class=“content”>Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯，quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外，你还得承担责任，这是因为你在实验室里表现得很糟糕</分区></div><p>其余页面内容</p＞
在文档流中展开/折叠
html格式{显示：栅格；}正文{显示：柔性；弯曲方向：柱；}.内容{背景：浅绿色；弹性基础：0；溢出：隐藏；过渡：1s；}span：悬停+内容{挠曲：1；}<span>悬停在我上方</span><div class=“content”>Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯，quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外，你还得承担责任，这是因为你在实验室里表现得很糟糕</分区><p>其余页面内容</p＞
