如何让CSS Transition的max-height: none？

Question

我的Html.NET

 <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">

和CSS到max_marquee是。

.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

你必须使用 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.ioarmanabpenZEbXbVR。