CSS过渡自动高度不工作

我有一个网站，我决定用纯CSS片段取代基于jquery的切换框。当我为过渡（CSS的最后一行）使用固定高度值时，效果很好，但是使用

auto

值时，动画会丢失，只有高度更改才有效果

有没有办法将其与自动值一起使用？我想使用可变文本和没有脚本

.ac容器{
宽度：400px；
保证金：10px自动30px自动；
文本对齐：左对齐；
}
.空调容器标签{
字体系列：“BebasNeueRegular”、“Arial窄字体”、Arial、无衬线字体；
填充：5px20px；
位置：相对位置；
z指数：20；
显示：块；
高度：30px；
光标：指针；
颜色：#777；
文本阴影：1px 1px 1px rgba（255255255,0.8）；
线高：33px；
字号：19px；
背景：#ffffff；
背景：-莫兹线性梯度（顶部，#ffffff 1%，#EAEA 100%）；
背景：-webkit渐变（线性、左上、左下、颜色停止（1%，#ffffff）、颜色停止（100%，#eaeaea））；
背景：-webkit线性梯度（顶部，#ffffff 1%，#EAEA 100%）；
背景：-o-线性梯度（顶部，#ffffff 1%，#EAEA 100%）；
背景：-ms线性梯度（顶部，#ffffff 1%，#EAEA 100%）；
背景：线性梯度（顶部，ffffff 1%，EAEA 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#ffffff'，endColorstr='#eaeaea'，GradientType=0）；
框阴影：
0px 0px 0px 1px rgba（155155,0.3），
1px 0px 0px 0px rgba（255255255,0.9）插图，
0px2px2pxRGBA（0,0,0,0.1）；
}
.ac容器标签：悬停{
背景：#fff；
}
.ac容器输入：选中+标签，
.ac容器输入：选中+标签：悬停{
背景：#c6e1ec；
颜色：#3d7489；
文本阴影：0px 1px 1px rgba（255255255,0.6）；
框阴影：
0px 0px 0px 1px rgba（155155,0.3），
0px2px2pxRGBA（0,0,0,0.1）；
}
.ac容器输入{
显示：无；
}
·空调货柜组{
背景：rgba（255,255,255,0.5）；
页边顶部：-1px；
溢出：隐藏；
高度：0px；
位置：相对位置；
z指数：10；
-webkit过渡：高度0.3s易入易出，盒影0.6s线性；
-moz过渡：高度0.3s缓进缓出，盒影0.6s线性；
-o型过渡：高度0.3s缓进缓出，盒影0.6s线性；
-ms过渡：高度0.3s缓进缓出，盒影0.6s线性；
过渡：高度0.3s缓进缓出，框影0.6s线性；
}
.ac集装箱组p{
字体：斜体；
颜色：#777；
线高：23px；
字体大小：14px；
填充：20px；
文本阴影：1px 1px 1px rgba（255255255,0.8）；
}
.ac容器输入：选中~部分{
-webkit过渡：高度0.5s易入易出，盒影0.1s线性；
-moz过渡：高度0.5s缓进缓出，盒影0.1s线性；
-o型过渡：高度0.5s缓进缓出，盒影0.1s线性；
-ms过渡：高度0.5s缓进缓出，盒影0.1s线性；
过渡：高度0.5s缓进缓出，盒影0.1s线性；
盒影：0px 0px 0px 1px rgba（155155,0.3）；
}
.ac容器输入：选中~section.ac-small{
高度：120px；/*自动*/
}

一些内容

关于我们
一些内容

关于我们

CSS转换不适用于自动值。使用JavaScript获取滚动高度。滚动高度或使用最大高度。

auto

不是可设置动画的属性的合适类型，请参阅。您需要长度（

px

，

em

，…）或百分比（

13.37%

）

---

因此，只要不将

auto

添加到列表中，就不可能只使用CSS解决方案。您需要使用JavaScript或特定的长度值。

如果您只想使用CSS，一个解决方案是将

最大高度

转换为

高度，而不是
高度
，并将其设置为比以往更大的值

这里有一个

你需要稍微调整一下转换的速度，但至少这个例子给了你一个如何实现的想法。在转换过程中也不要忘记更改属性。从<代码>过渡：高度0.5s到<代码>过渡：最大高度0.5s

希望这有帮助


.ac容器{
宽度：400px；
保证金：10px自动30px自动；
文本对齐：左对齐；
}
.空调容器标签{
字体系列：“BebasNeueRegular”、“Arial窄字体”、Arial、无衬线字体；
填充：5px20px；
位置：相对位置；
z指数：20；
显示：块；
高度：30px；
光标：指针；
颜色：#777；
文本阴影：1px 1px 1px rgba（255255255,0.8）；
线高：33px；
字号：19px；
背景：#ffffff；
背景：-莫兹线性梯度（顶部，#ffffff 1%，#EAEA 100%）；
背景：-webkit渐变（线性、左上、左下、颜色停止（1%，#ffffff）、颜色停止（100%，#eaeaea））；
背景：-webkit线性梯度（顶部，#ffffff 1%，#EAEA 100%）；
背景：-o-线性梯度（顶部，#ffffff 1%，#EAEA 100%）；
背景：-ms线性梯度（顶部，#ffffff 1%，#EAEA 100%）；
背景：线性梯度（顶部，ffffff 1%，EAEA 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#ffffff'，endColorstr='#eaeaea'，GradientType=0）；
框阴影：
0px 0px 0px 1px rgba（155155,0.3），
1px 0px 0px 0px rgba（255255255,0.9）插图，
0px2px2pxRGBA（0,0,0,0.1）；
}
.ac容器标签：悬停{
背景：#fff；
}
.ac容器输入：选中+标签，
.ac容器输入：选中+标签：悬停{
背景：#c6e1ec；
颜色：#3d7489；
文本阴影：0px 1px 1px rgba（255255255,0.6）；
框阴影：
0px 0px 0px 1px rgba（155155,0.3），
0px2px2pxRGBA（0,0,0,0.1）；
}
.ac容器输入{
显示：无；
}
·空调货柜组{
背景：rgba（255,255,255,0.5）；
页边顶部：-1px；
溢出：隐藏；
最大高度：0px；
位置：相对位置；
z指数：10；
-webkit过渡：最大高度0.3s e