如何使用 react 和 material-ui 让一个元素滑入而另一个元素滑出?

Question

我在反应中有两个元素，包裹在幻灯片中：

<div className={classes.wrapper}>
<Switch
checked={checked}
onChange={this.handleChange}
aria-label="Collapse"
/>
<Slide
direction="left"
style={{ transitionDelay: !checked ? "10000ms" : "0ms" }}
in={checked}
timeout={1000}
mountOnEnter
unmountOnExit
>
<Paper elevation={4} className={classes.paper}>
<svg className={classes.svg}>
<polygon
points="0,100 50,00, 100,100"
className={classes.polygon}
/>
</svg>
</Paper>
</Slide>
<Slide
direction="left"
style={{ transitionDelay: checked ? "10000ms" : "0ms" }}
in={!checked}
timeout={1000}
mountOnEnter
unmountOnExit
>
<Paper elevation={4} className={classes.paper}>
<svg className={classes.svg}>
<polygon
points="0,100 50,00, 100,100"
className={classes.polygon2}
/>
</svg>
</Paper>
</Slide>
</div>

此处显示的完整代码。

我试图让一个元素在另一个元素之前离开，以便它们交换，但这似乎是不可能的？我已经尝试了超时和过渡延迟的各种组合，但我无法在另一个到达之前让一个离开。

Answer 1

您是否尝试过在每个元素上使用三元元？

https://codesandbox.io/embed/v8yov0r2x7

一个选项，虽然它可能不是最好的，但是当标志"选中"为真并且显示另一个元素时，您可以隐藏其中一个元素，反之亦然。

第一个选项(滑动一个并消失另一个)：

渲染元素：

<div className={classes.root}>
<div className={classes.wrapper}>
<Switch
checked={checked}
onChange={this.handleChange}
aria-label="Collapse"
/>
{!checked ? (
<Slide direction="right" in={!checked} mountOnEnter unmountOnExit>
<Paper elevation={4} className={classes.paper}>
<svg className={classes.svg}>
<polygon
points="0,100 50,00, 100,100"
className={classes.polygon}
/>
</svg>
</Paper>
</Slide>
) : null}
{checked ? (
<Slide direction="right" in={checked} mountOnEnter unmountOnExit>
<Paper elevation={4} className={classes.paper}>
<svg className={classes.svg}>
<polygon
points="0,100 100,00, 100,100"
className={classes.polygon}
/>
</svg>
</Paper>
</Slide>
) : null}
</div>
</div>

第二个选项(滑动一个，另一个滑动到相反)：

https://codesandbox.io/s/q72j8p7w54

渲染元素：

<div className={classes.root}>
<div className={classes.wrapper}>
<Switch
checked={checked}
onChange={this.handleChange}
aria-label="Collapse"
/>
<div className={classes.elementsContainer}>
<Slide
classes={{ root: classes.slide }}
direction="left"
in={checked}
mountOnEnter
unmountOnExit
timeout={{ enter: 1000, exit: checked ? 1 : 900 }}
>
<Paper elevation={4} className={classes.paper}>
<svg className={classes.svg}>
<polygon
points="0,100 50,00, 100,100"
className={classes.polygon}
/>
</svg>
</Paper>
</Slide>
<Slide
classes={{ root: classes.slide }}
direction="right"
in={!checked}
mountOnEnter
unmountOnExit
timeout={{ enter: 1000, exit: !checked ? 1 : 900 }}
>
<Paper elevation={4} className={classes.paper}>
<svg className={classes.svg}>
<polygon
points="0,100 100,00, 100,100"
className={classes.polygon}
/>
</svg>
</Paper>
</Slide>
</div>
</div>
</div>