Как заставить одни элементы вставляться, а другие - скользить, используя response и material-ui? - PullRequest
Новая
       59

Как заставить одни элементы вставляться, а другие - скользить, используя response и material-ui?

0 голосов
/ 12 апреля 2019

У меня есть два элемента в реакции, завернутые в слайд : 

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

Полный код показан здесь .

Япытаясь заставить один элемент уйти раньше, чем другой, чтобы они поменялись местами, но кажется, что это невозможно?Я пробовал разные комбинации timeout и transitionDelay, но я не могу заставить одну из них уйти до того, как прибудет другая.

1 Ответ

1 голос
/ 12 апреля 2019

Вы пытались использовать троичный на каждом элементе?

https://codesandbox.io/embed/v8yov0r2x7

Опция, хотя она и может быть не самой лучшей, но вы можете скрыть один из элементов, когда флаг «флажок» имеет значение «истина», а другой отображается, и наоборот.

1-й вариант (сдвиньте один, а другой исчезните) :

Визуализация элемента : 

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