Как сделать CSS Переход с максимальной высотой: нет?

Question

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

My 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 to max_marquee:

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

Я хочу знать, как я могу сделать свой переход к работать, когда высота увеличивается, я знаю, что мне нужно установить высоту для перехода на работу, но мне было интересно, есть ли обходной путь, потому что я действительно никогда не знаю высоту, поэтому мне нужно, чтобы она была max-height: none.

Answer 1

вы должны использовать 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

Answer 2

вы только ошибочно приняли позицию приличия перехода, которая должна go в классе .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;
}

вам не нужно знать высоту элемента.

Надеюсь, это поможет