当从容器中删除元素时，动画过渡到容器div的新高度

Question

我使用jQuery创建了一个过滤器，以便在单击时从div中删除一些元素。我使用opacity:0和visibilty:hidden，因此在过滤这些元素时会有淡入淡出动画。在淡入淡出动画之后，我使用display:none将它们从div中删除。如果它们再次未经过滤，则会将其设置为display:block并设置opacity:1以使它们重新出现。

当div的内容被删除时＃34;使用display:none，容器div的高度立即设置为新的较短高度。 我希望容器div能够通过动画缩短它的新高度，而不是立即改变高度。到目前为止，有没有办法用我的解决方案做到这一点？

我希望在删除内容时添加transition: all 0.35s ease-in会有效，但它会立即改变到它的新高度。 由于这是一种响应式设计，高度不固定，因此在不同的屏幕宽度下会有所不同。

可以在以下jsfiddle中查看代码... https://jsfiddle.net/qv5vrz6c/

Answer 1

使用display属性来显示/隐藏元素的问题是你无法在其上应用CSS过渡。

但是，您可以使用height元素的overflow:hidden;来执行此操作：

.web-box, .game-box{
  transition:all 0.5s;
  height: 120px;
  overflow: hidden;
}

.web-box.mp-hide, .game-box.mp-hide{
  height: 0;
  transition:all 0.5s;
}

Live example