reactjs - 如何在 React-Motion 中删除绝对定位元素之间的垂直空间

Question

所以，我试图在我的项目中使用React-Motion创建一个可拖动的列表。

但是，我想不出删除列表之间空格的方法（见下图）。我在某处读到这是由于 HTML 中绝对元素的性质。

// Here is a snippet of the CSS styles
// View the entire codes by clicking the link below

.demo8-item {
     position: absolute;
     width: 320px;
     height: 40px;
     overflow: visible;
     pointer-events: auto;
     transform-origin: 50% 50% 0px;
     border-radius: 4px;
     color: rgb(153, 153, 153);
     line-height: 40px;
     padding-left: 32px;
     font-size: 24px;
     font-weight: 400;
     background-color: rgb(255, 255, 255);
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
}

.demo8-outer {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
}

我试图检查 HTML 元素以找到罪魁祸首，但无济于事。我找不到导致这些空间的元素；将边距和填充设置为 0 没有任何作用！

我的问题是，有没有办法在不破坏动画的情况下删除这些空格（即通过将其转换为内联块等）？

谢谢你。

沙盒链接

Answer 1

您可以控制spring()配置使用的高度

// `y` prop, here is how the height is calculated
y: spring(order.indexOf(i) * 100, springConfig),

更改100为类似70或您喜欢的任何内容：

y: spring(order.indexOf(i) * 70, springConfig),