MUI 幻灯片切换不适用于两个幻灯片

Question

我希望每个 mui 幻灯片的动画在单击按钮时起作用。但出于某种原因，他们不想一起工作。如果您注释掉其中一张幻灯片，第二张幻灯片就会开始工作，但它们在一起就不会了。

这是我的样本在 codesandbox 上的 link：https://codesandbox.io/s/happy-fire-csr2go?file=/src/demo.js

Answer 1

因为你使用isPink来控制组件的渲染，当条件不成立时，组件在update时卸载，不执行动画。

// don't use this
{isPink ? (<div></div>) : (<div></div>)}

代码片段

        <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>

完整代码演示