Как плавно перейти к заполнению пространства элемента с абсолютным позиционированием ⇐ CSS

[Anonymous]

Я пытаюсь получить список элементов для плавного перехода в зависимости от того, добавляется или удаляется один из них. Суть этого заключается в плавном переходе к заполнению пространства недавно измененного элемента с абсолютным позиционированием. В этом примере применяется плавное перемещение к последующему элементу в списке, что является всего лишь правилом облегчения перехода.
Я пытаюсь воссоздать следующий пример:
https: //vuejs.org/examples/#list-transition
Вот базовый тест, я не пытаюсь показать весь переход элементов, просто переход для заполнения пространства оставленный пунктом выше. Я включил в элементы класс постепенного перемещения по умолчанию, чтобы избежать проблем с синхронизацией. Но я не уверен, почему, когда к элементу 1 применяется абсолютное значение, элемент 2 подпрыгивает, заполняя пространство, а не плавно скользит вверх, как в примере Vue.
Пример песочницы:
Тест перехода в песочницу
Test.tsx
import classNames from 'classnames';
import React, { useEffect, useRef, useState } from 'react';

const Test: React.FC = () => {
const [show, setShow] = useState(true);
const [currentClass, setCurrentClass] = useState('');

const toggleShow = () => {
setShow(prevShow => !prevShow);
};

useEffect(() => {
if (show) {
setCurrentClass('fade-enter-from');
requestAnimationFrame(() => {
setCurrentClass('fade-enter-active fade-enter-to');
});
} else {
setCurrentClass('fade-leave-from');
requestAnimationFrame(() => {
setCurrentClass('fade-leave-active fade-leave-to');
});
}
}, [show]);

return (


Toggle Element



Element 1

Element 2


);
};

export default Test;

app.css
.container {
position: relative;
padding: 0;
list-style-type: none;
}

.item {
width: 100%;
height: 60px;
background-color: #f3f3f3;
border: 1px solid #666;
box-sizing: border-box;
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); /* Apply transition to all items by default */
}

.fade-move,
.fade-enter-active,
.fade-leave-active {
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

/* 2. declare enter from and leave to state */
.fade-enter-from,
.fade-leave-to {
opacity: 0;
transform: scaleY(0.01) translate(30px, 0);
}

/* 3. ensure leaving items are taken out of layout flow so that moving
animations can be calculated correctly. */
.fade-leave-active {
position: absolute;
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... ed-element