0
239
ViewsMUI Slide Transition no funciona con dos diapositivas
Quiero que la animación de cada Mui Slide funcione cuando se hace clic en el botón. Pero por alguna razón no quieren trabajar juntos. Si comenta una de las diapositivas, la segunda comienza a funcionar, pero juntas no.
Aquí hay un enlace en codesandbox con mi muestra: https://codesandbox.io/s/happy-fire-csr2go?file=/src/demo.js
·
Juan Pablo Isaza
1 answers
Answer question0
Debido a que usa isPink para controlar la representación del componente, cuando la condición no es verdadera, el componente se desmonta cuando se update y no se realiza ninguna animación.
// don't use this {isPink ? (<div></div>) : (<div></div>)}Fragmento de código
<Grid container item> <Slide in={isPink} direction="left" container={containerRef.current} mountOnEnter unmountOnExit > <Box sx={{ position: "absolute", width: 150, height: 150, bgcolor: "pink" }} > <Button onClick={() => setIsPink(false)}>show aquamarine</Button> </Box> </Slide> <Slide in={!isPink} direction="right" container={containerRef.current} mountOnEnter unmountOnExit > <Box sx={{ position: "absolute", width: 150, height: 150, bgcolor: "aquamarine" }} > <Button onClick={() => setIsPink(true)}>show pink</Button> </Box> </Slide> </Grid>Demostración de código completo
·
Juan Pablo Isaza
Report
Answer question