当最大高度减少时，最大高度过渡不起作用

Question

如果div的max-height增加， css过渡效果很好，但是当同一个div的max-height减少时，高度变化没有过渡。

这是类似于我的代码的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>

Answer 1

您在悬停伪类中编写了最大高度和高度。 如果您使用 min-height 而不是 height ，它将起作用，但您必须在两个块中进行设置：

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

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

这应该可以解决您的问题。

Answer 2

您可以在不设置高度的情况下执行此操作，您必须设置最小高度，请参见下面的示例

注意 - 在正常的.c状态下，如果需要，您可以将 min-height 设置为 1px，但它会加快动画速度，因为您将从 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>