我有两个反应元素,用slide包裹:
<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>
完整代码显示here。
我试图在另一个元素出现之前让一个元素离开,以便它们交换,但似乎这是不可能的?我尝试了各种超时和transitionDelay的组合,但是在另一个到达之前我无法离开。
您是否尝试在每个元素上使用三元组?
https://codesandbox.io/embed/v8yov0r2x7
一个选项,虽然它可能不是最好的,但是当标记“checked”为真且另一个显示时,您可以隐藏其中一个元素,反之亦然。
第一个选项(滑动一个并消失另一个):
渲染元素:
<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>
第2个选项(滑动一个并将另一个滑动到另一个):
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>