如何使用最大高度进行 CSS 过渡：无？答案

【问题标题】：How to make CSS Transition with max-height: none?如何使用最大高度进行 CSS 过渡：无？
【发布时间】：2020-08-14 02:42:05
【问题描述】：

我的 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;
}

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

【问题讨论】：

您的问题没有简单的解决方案，因为您无法转换 auto 值，但有很多解决方法。这篇文章深入解释了这个问题：css-tricks.com/using-css-transitions-auto-dimensions

标签： html css css-transitions

【解决方案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;
}

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

希望对你有帮助

【讨论】：

对！ ease-in-out 和 0.5s 倒置，以前没注意过，现在试试

【解决方案2】：

您必须使用transition 转换为.home-intro

.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

【讨论】：