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

Question

我用 jQuery 制作了一个过滤器，在单击时从 div 中删除一些元素。我使用 opacity:0 和 visibilty:hidden 所以当这些元素被过滤时会有淡入淡出的动画。在淡入淡出动画之后，我使用 display:none 将它们从 div 中移除。如果它们随后再次未被过滤，它们将被设置为 display:block 并设置 opacity:1 以使它们重新出现。

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

我原以为添加 transition: all 0.35s ease-in 会在内容被删除时起作用，但它只是立即改变到新的高度。 由于这是一个响应式设计，高度不是固定的，它会根据不同的屏幕宽度而变化。

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

Answer 1

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

但是，您可以使用带有 overflow:hidden; 的元素的 height 来达到目的:

.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