如何在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没有任何作用！

我的问题是，有没有一种方法可以在不破坏动画的情况下删除这些空格(例如，通过将其转换为内联块，等等)？

谢谢。

​

​

Link to sandbox

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),