0
96
Views¿Cómo configurar animaciones de entrada/salida con contenedor para el componente Slide?
Quiero un componente para realizar la animación de la diapositiva a la derecha cuando está montado y a la izquierda cuando está desmontado, todo usando el div que pertenece a la clase "profile-slide-container" como contenedor del componente Slide, pero No tengo idea de cómo hacerlo.
Aquí está el código:
function Main(){ const [showProfileMenu, setShowProfileMenu] = useState(false); return( <div className="main"> <Header /> <div className="profile-slide-container"> {showProfileMenu && <Slide in={true} direction={"right"}><div className="pseudo-left-section"><ProfileMenu onClick={() => setShowProfileMenu(false)} /></div></Slide>} </div> <div className="left-section"> <div> <LeftSectionHeader onClick={() => setShowProfileMenu(true)} /> <LangMenu /> </div> </div> </div> ); }1 answers
Answer question0
A continuación se muestra el código correcto para mover el artículo dentro y fuera del contenedor. Debe crear una referencia que contenga una referencia del elemento contenedor y pasarla al componente Slide a través de la propiedad del container . Cuando se proporciona un contenedor, Slide obtiene su rectángulo delimitador, luego calcula la distancia para traducir fuera del borde del contenedor.
También puede configurar overlow: 'hidden' en el contenedor para que el elemento animado pueda desaparecer cuando se mueve fuera del contenedor.
const [checked, setChecked] = React.useState(false); const containerRef = React.useRef(null); const handleChange = () => setChecked((prev) => !prev); return ( <Box sx={{ width: `calc(100px + 16px)` }}> <FormControlLabel control={<Switch checked={checked} onChange={handleChange} />} label="Show" /> <Box ref={containerRef} style={{ marginLeft: 130, backgroundColor: 'gray', width: 400, height: 200, overflow: 'hidden', }} > <Slide direction="right" in={checked} container={containerRef.current}> <Box sx={{ width: 50, height: 50, bgcolor: 'pink' }} /> </Slide> </Box> </Box> ); 