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

问题描述 投票:0回答:1

我有两个反应元素,用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的组合,但是在另一个到达之前我无法离开。

reactjs css-transitions material-ui reactcsstransitiongroup
1个回答
1
投票

您是否尝试在每个元素上使用三元组?

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>
© www.soinside.com 2019 - 2024. All rights reserved.