Как убрать вертикальные пробелы между абсолютно позиционированными элементами в React-Motion - PullRequest
0 голосов
/ 27 февраля 2020

Итак, я пытаюсь создать перетаскиваемый список с 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 ничего не делает!

Мой вопрос заключается в том, есть ли способ удалить эти пробелы, не нарушая анимацию (т.е. преобразовав ее в inline-block и т. Д. c.)?

Спасибо.

Spaces in between absolute content

Ссылка на песочницу

1 Ответ

1 голос
/ 27 февраля 2020

Вы можете управлять высотой, используемой 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),
...