Tengo problemas para animar el accesorio recibido del componente principal. El mecanismo de animación que uso es el componente Collapse de material-ui .

Cuando el componente principal pasa undefined como apoyo de texto, el texto desaparece inmediatamente y la animación "salta". Mira el código a continuación:

 import * as React from "react"; import Switch from "@mui/material/Switch"; import Collapse from "@mui/material/Collapse"; import FormControlLabel from "@mui/material/FormControlLabel"; interface AnimatedTextProps { text?: string; } const AnimatedText = ({ text }: AnimatedTextProps) => ( <div> <Collapse in={Boolean(text)} timeout={2000} unmountOnExit> {/* when the parent component passes `undefined` as the text prop, the text disappears immediately */} {/* it causes that animation "jumps" */} {/* how to keep the text prop until the animation finishes? */} <div style={{ background: "red", padding: "40px" }}>{text}</div> </Collapse> </div> ); export default function SimpleCollapse() { const [text, setText] = React.useState<string | undefined>(undefined); const handleChange = (e) => { const checked = e.target.checked; setText(checked ? "hidden text" : undefined); }; return ( <div> <FormControlLabel control={<Switch checked={Boolean(text)} onChange={handleChange} />} label="Show" /> <AnimatedText text={text} /> </div> ); }

Caja de arena: https://codesandbox.io/s/simplecollapse-material-demo-forked-75tiv?file=/demo.tsx

¿Cómo evitar los saltos y mantener el apoyo de texto hasta que finalice la animación?