如何删除 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 元素以找到罪魁祸首，但无济于事。我找不到导致这些空格的元素；将 margin 和 padding 设置为 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),

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

How to remove vertical spaces between absolute positioned elements in React-Motion

reactjs

react-motion