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

Question

我有两个 react 元素，包裹在 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 .

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

Answer 1

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

https://codesandbox.io/embed/v8yov0r2x7

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

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

渲染元素:

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