css - 动画完成后动画会停止 css 更改吗？

Question

我在打开抽屉时有一个动画，它从底部弹起然后停在 33% 的高度。动画之后，抽屉需要可以拖动。我通过调整固定位置抽屉的高度和顶部来创建可拖动功能。

问题:

动画结束后，抽屉的高度不再重新渲染。 CSS 'height' 属性调整正确，但新高度不显示。

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

我还没有尝试过任何东西，我不明白潜在的问题是什么。

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