So gelingt ein reibungsloser Übergang zum Ausfüllen des Raums eines absolut positionierten Elements ⇐ CSS

[Guest]

Ich versuche, eine Liste von Elementen zu erstellen, die einen reibungslosen Übergang ermöglichen, je nachdem, ob eines hinzugefügt oder entfernt wird. Der Kern davon besteht darin, einen reibungslosen Übergang zum Füllraum eines neu geänderten, absolut positionierten Elements zu ermöglichen. Dieses Beispiel wendet einen Fade-Move auf das nachfolgende Element in der Liste an, was lediglich eine einfache Übergangsregel ist.
Das Beispiel, das ich neu erstellen möchte, ist dieses:
https: //vuejs.org/examples/#list-transition
Hier ist ein grundlegender Test. Ich versuche nicht, den gesamten Übergang der Elemente anzuzeigen, sondern nur den Übergang, um den Raum zu füllen links durch den Artikel oben. Ich habe den Elementen standardmäßig die Fade-Move-Klasse hinzugefügt, um Probleme mit dem Timing zu vermeiden. Aber ich bin mir nicht sicher, warum, wenn Absolut auf Element 1 angewendet wird, Element 2 nach oben springt, um den Raum auszufüllen, anstatt wie im Vue-Beispiel sanft nach oben zu gleiten.
Beispiel-Sandbox:
Sandbox-Übergangstest
Test.tsx

Code: Select all

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

Code: Select all

.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;
}