переход на максимальную высоту не работает при уменьшении максимальной высоты - PullRequest
Новая
       2

переход на максимальную высоту не работает при уменьшении максимальной высоты

0 голосов
/ 06 февраля 2020

Если max-height для div увеличено, переход css работает нормально, но когда max-height того же div уменьшается, высота изменяется без перехода.

Вот jsfiddle кода, похожего на мой. https://jsfiddle.net/31sukrxq/43/

.a {
  height: 300px;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow-y: auto;
}

.b {
  background: gray;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  flex: 1 1 auto;
}

.c {
  max-height: 200px;
  background: slategray;
  color: white;
  overflow-y: hidden;
  transition: 1s;
}

.c:hover {
  max-height: 300px;
  height: 300px;
}

.c-parent {
  flex: 0 0 auto;
}
<div class="a">
  <div class="b">
    Background DIV
  </div>
  <div class="c-parent">
    <div class="c">
      Hover over me<br> foo bar<br> foo bar<br> foo bar<br> foo bar<br> foo bar<br> foo bar<br> foo bar<br> foo bar<br> foo bar<br>
    </div>
  </div>
</div>

Ответы [ 2 ]

1 голос
/ 06 февраля 2020

Вы можете сделать это без установки высоты, вам просто нужно установить минимальную высоту, см. Пример ниже

Примечание - в нормальном состоянии .c вы можете установить минимальную высоту в 1 пиксель, если Вы хотите, но это ускорит анимацию, потому что вы идете от 300 до 1 

.a {
  height: 300px;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow-y: auto;
}

.b {
  background: gray;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  flex: 1 1 auto;
}

.c {
  max-height: 200px;
  min-height: 100px;
  background: slategray;
  color: white;
  overflow-y: hidden;
  transition: 1s;
}

.c:hover {
  max-height: 300px;
  min-height: 300px;
}

.c-parent {
  flex: 0 0 auto;
}
<div class="a">
  <div class="b">
    Background DIV
  </div>
  <div class="c-parent">
    <div class="c">
      Hover over me<br>
      foo bar<br>
      foo bar<br>
      foo bar<br>
      foo bar<br>
      foo bar<br>
      foo bar<br>
      foo bar<br>
      foo bar<br>
      foo bar<br>
    </div>
  </div>
</div>
1 голос
/ 06 февраля 2020

Вы написали в псевдоклассе hover максимальную высоту и высоту. Если вы используете минимальную высоту вместо высоты, она будет работать, но вы должны установить в обоих блоках: 

.c {
  max-height: 200px;
  min-height: 0px;       <=====
  background: slategray;
  color: white;
  overflow-y: hidden;
  transition: 1s;
}

.c:hover {
  max-height: 300px;
  min-height: 300px;       <=====
}

Это должно решить вашу проблему.

...