动画完成后，动画停止CSS更改

Question

我在打开抽屉时有一个动画，该抽屉是从底部向上反弹，然后在33％的高度停止。动画后，抽屉需要拖动。我通过调整固定位置抽屉的高度和顶部来创建可拖动功能。

问题：

动画完成后，抽屉的高度不再重新租赁。CSS"高度"属性确实适当调整，但新的高度不显示。

如何获得抽屉的高度正确调整？

我还没有尝试过任何事情，我不明白基本问题是什么。

.spring {
      animation-name: spring-action;
      animation-timing-function: ease;
      animation-fill-mode: forwards;
      animation-delay: 1s;
      animation-direction: normal;
      animation-duration:1.2s;
      transform-origin: bottom;
}
@keyframes spring-action {
  0%   { height: 0%; }
  50%   { height:40%; }
  100%   { height: 33%; }
} 

我希望抽屉的高度在拖动时会增加，但是抽屉只拖动(调整并渲染顶部(而不调整高度。

Answer 1

使用max-height或min-height代替height

.spring {
      animation: spring-action 3s 1 ease forwards;
      transform-origin: bottom;
}
@keyframes spring-action {
  0%   { min-height: 0% ;}
  50%   { min-height:40% ;}
  100%   { min-height: 33% ; }
} 
.spring{
background:#2f0;
width:300px;
}
.container{
  height:300px;
}

<div class="container">
  <div class="spring">test</div>
</div>

Answer 2

height: auto这是每个元素的默认值，也是没有继承的高度。如果height: auto;，该元素将自动调整其高度以允许正确显示其内容。

设置height:{n}%时是父元素的{n}%。

min-height和max-height属性覆盖了高度属性。

min-height属性默认值为零(0(， max-height属性默认值无。

min-height对浏览器说：嘿，伙计！您必须从我的价值开始高度。

我希望它对您有用！