CSS 淡出过渡，但元素位置仍保留一些空间

Question

我有一个垂直排列的 div 列表，我试图在单击按钮时使某个元素淡出。随着内容变得不可见，我还需要将其高度和宽度设为 0 以释放空间。如果我一次完成所有转换，div 将改变高度和宽度，并且文本在变得不可见之前会奇怪地拉伸。我尝试修复它是在高度/宽度转换上添加延迟，这似乎有效，但在 div 所在的地方，仍然有一些空间，比如边距。我也尝试将边距/填充转换为 0，但它没有做任何事情。

.list-element
    background-color: #E7E9EB;
    border-radius: 5px;
    margin: 20px;
    padding: 15px;
    display: flex;
    width: 100%;

我正在使用 React，并且在按下按钮时将以下类动态添加到 div。

.list-element-approved
    opacity: 0;
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0);
    transition: height 0.1s 1s, width 0.1s 1s, margin 0.5s 1s, padding 0.5s 1s, opacity 0.5s;

过渡后留下空间的原因是什么？我怎样才能摆脱它？

Answer 1

发生这种情况是因为尽管您已通过将已批准列表元素的高度设置为零来使其不可见，但它仍然存在。周围的可见列表元素与它们的邻居有 20 像素的边距，而不可见的邻居仍然存在。因此，两个可见列表项之间的总边距以及它们之间的一个不可见列表项是 40 像素。

以下是解决此问题的方法：

.list-element-approved {
  ...
  margin: 0 0 -20px 0;
  ...
}

或者，您必须完全删除已批准的列表项，但这会使您的过渡效果失效。