如何使CSS转换最大高度:无

Question

我的Html:

<div class="home-intro" id="home-intro">
<h2>
<a>Some really long text</a>
</h2>
</div>
<div id="arrow"><i class="fa fa-angle-double-down fa-2x"></i></div>

我的CSS:

.home-intro {
background: #34373b;
color: #fff;
padding: 15px 0 0;
max-height: 67px;
overflow: hidden;
}

我有一个javascript，当你点击div<div id="arrow">时，它会将类max_marquee添加到home intro中，所以类似于这个<div class="home-intro max_marquee" id="home-intro">

max_marquee的CSS为：

.max_marquee {
max-height: none;
transition: max-height ease-in-out 0.5s;
}

我想知道当高度扩大时，我如何过渡到工作，我知道我需要为过渡到工作设置一个高度，但我想知道是否有解决办法，因为我真的不知道高度，这就是为什么我需要它是最大高度：没有。

Answer 1

您只是弄错了应该在.home intro类中的转换适当性的位置，还颠倒了时间和转换曲线
所以你的css应该是这样的：

.home-intro {
background: #34373b;
color: #fff;
padding: 15px 0 0;
max-height: 67px;
overflow: hidden;
transition: max-height 0.5s ease-in-out;
}
.max_marquee {
max-height: none;
}

你不需要知道元素的高度。

希望它能帮助

Answer 2

必须在.home-intro中使用transition

.home-intro {
background: #34373b;
color: #fff;
padding: 15px 0 0;
height: 67px;
overflow: hidden;
transition: height ease-in-out 0.5s;
}
.max_marquee {
height: 200px;
}

看看这个样本

https://codepen.io/armanab/pen/ZEbXbVR

Answer 3

我知道我参加聚会迟到了，但我想我找到了一个答案，可以让你保持max-height：使用视口高度。

正如Brandon Smith通过andywanee指出的那样，不能像none那样转换auto值。但是，浏览器不认为vh或vw是自动生成的。因此，您可以使用以下内容：

.max_marquee {
max-height: 100vh;
transition: max-height ease-in-out 0.5s;
}

此外，根据ABlue的回答，您必须将transition添加到.home-intro。

如需更多阅读，请阅读这本关于视口概念的有用指南。