Estoy animando dos elementos en un cambio de accesorios: un contenedor div se desliza hacia adentro/afuera con max-height , y el contenido del div se desvanece hacia adentro/afuera con opacity .

El problema es que quiero que el contenedor se anime después del contenido de la animación de "salida", pero quiero que aparezca antes del contenido de la animación de "entrada". Actualmente, los elementos siempre van en el mismo orden: primero la transición del contenido, luego el contenedor. Esto significa que el contenido aparece antes de que el contenedor se haya deslizado en la animación "dentro".

Intenté usar el atributo reverse y los keyframes de los componentes con estilo, pero, sinceramente, soy tan malo con las animaciones CSS que no puedo comenzar a entender lo que necesito cambiar.

Aquí está el código actual:

Componente.tsx

 export default function Component() { const [showBanner, setShowBanner] = useState(true); const handleAccept = () => { setShowBanner(false); }; const handleReject = () => { setShowBanner(false); }; return ( <StyledComponent $showBanner={showBanner}> <StyledText> // some text </StyledText> <StyledButtonsContainer> // some buttons </StyledButtonsContainer> </StyledComponent> ); }

Componente.estilos.tsx

 export const StyledComponent = styled.div<{ $showBanner: boolean }>` &&& { position: absolute; z-index: ${zIndex("overlay")}; display: flex; flex-direction: column; max-height: ${(props) => (props.$showBanner ? "100%" : "0")}; height: 100%; width: 100%; background: ${(props) => props.theme.secondary}; color: ${(props) => props.theme.white}; transition: max-height 0.5s 0.5s ease; @media ${device.tablet} { border-radius: 0 0 2px 20px; } * { // targeting everything all of the contents opacity: ${(props) => (props.$showBanner ? "100%" : "0%")}; transition: opacity 0.5s ease; } } `;