CODEWITHSUNDEEP
reactjscss-transitionsmaterial-uireactcsstransitiongroup
AncientSwordRage
AncientSwordRage

Reputation: 7615

How to get one elements to slide in while the other slides out, using react and material-ui?

I have two elements in react, wrapped in a 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>

Full code shown here.

I'm trying to get one element to leave before the other one does, so that they swap, but it seems like that's not possible? I've tried various combinations of timeout, and transitionDelay, but I can't get one to leave before the other one arrives.

Upvotes: 2

Views: 8935

Answers (1)

frangaliana
frangaliana

Reputation: 803

Have you tried using a ternary on each element?

https://codesandbox.io/embed/v8yov0r2x7

An option, although it may not be the best, but you can hide one of the elements when the flag "checked" is true and the other is shown and vice versa.

1st option (Slide one and disappear the other):

Render element:

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

2st option (Slide one and slide the other to the opposite):

https://codesandbox.io/s/q72j8p7w54

Render element:

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

Upvotes: 5

Related Questions