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

Question

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.

frangaliana · Answer 1 · 2019-04-12T12:20:04.547

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>

I tried something similar where instead of `condition ? element: null` I have `condition: element1: element2`. This works better, but the element that is 'switched off' never exits, it instately vanishes and is replaced by null. — AncientSwordRage, Apr 12 '19 at 10:10
Yes, this solution is "simulating" the transition. I think that in my thinking (there can be several), normally when you want to make a transition of one-way objects you want an object to appear and the previous object disappears. I hope I was able to help you :) — frangaliana, Apr 12 '19 at 10:55
It's a useful approach, but not the one I am going for. I want the appearance and disappearance to animate together. It might not be possible with just `Slide`. — AncientSwordRage, Apr 12 '19 at 11:01
@Pureferret , do you want something like that? This way, you'd have to hide the parent scroll and position two elements in line https://codesandbox.io/s/q72j8p7w54 — frangaliana, Apr 12 '19 at 11:42
@Pureferet how do you do this with more than 2 elements? Say you have 4 elements where you only want one element to show at a time and as you press a button, you slide the first element up and out of the screen while the second element slides up from the bottom screen? — , Nov 22 '19 at 20:28

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

1 Answers1