Я пытаюсь получить список элементов для плавного перехода в зависимости от того, добавляется или удаляется один из них. Суть этого заключается в плавном переходе к заполнению пространства недавно измененного элемента с абсолютным позиционированием. В этом примере применяется плавное перемещение к последующему элементу в списке, что является всего лишь правилом облегчения перехода.
Я пытаюсь воссоздать следующий пример:
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
