0
242
ViewsMUI Slide Transition doesn't work with two Slide
I want the animation for each mui Slide to work when the button is clicked. But for some reason they don't want to work together. If you comment out one of the slides, the second one starts working, but together they don't.
Here's a link on codesandbox with my sample: https://codesandbox.io/s/happy-fire-csr2go?file=/src/demo.js
·
Juan Pablo Isaza
1 answers
Answer question0
Because you use the isPink to control the rendering of the component, when the condition is not true, the component is unmounted when update, and no animation is performed.
// don't use this
{isPink ? (<div></div>) : (<div></div>)}
Code Fragment
<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>
Full code demo
·
Juan Pablo Isaza
Report
Answer question