<Fade> в Material-UI просто отключает видимость компонента.Как получить эффект затухания и фактически скрыть компонент?

Question

Я использую компонент material-ui из material-ui .

<Fade in={!randomizeFlag}>
              <Grid>
                <FormControlLabel control={<Switch onChange={this.handleStartValueFlag} ></Switch>} label="Start Value"></FormControlLabel>
                <TextField  type="number" label="Starting Value" value={startValue} onChange={this.handleStartValueChange} />
              </Grid>
</Fade>

Я хочу полностью скрыть элемент Grid, когда компонент исчезает, но он только отключает видимостькомпонента и занимает то же место (выглядит пустым) в DOM. Как сделать так, чтобы элемент скрывался после его исчезновения, используя <Fade>

Answer 1

Сокрытие элемента полностью привнесет сложность, поскольку теперь вы также должны показывать элемент, когда начинается исчезновение.Это может помешать эффекту затухания.

С учетом сказанного у вас есть несколько вариантов:

• Использование селекторов атрибутов CSS для применения стилей:

  div[opacity=0] {
    display: none;
  }
  
  div[opacity=1] {
    display: block;
  }
  

• Использовать реакцию-переход напрямую (поскольку именно это Fade использует): https://reactcommunity.org/react-transition-group/transition

  import Transition from 'react-transition-group/Transition';
  
  const duration = 300;
  
  const defaultStyle = {
      transition: `opacity ${duration}ms ease-in-out`,
      opacity: 0,
  }
  
  const transitionStyles = {
      entering: { opacity: 0, display: 'none' },
      entered:  { opacity: 1 , display: 'block'},
      exited:  { opacity: 0, display: 'none'},
  };
  
  const Fade = ({ in: inProp }) => (
      <Transition in={inProp} timeout={duration}>
          {(state) => (
          <div style={{
              ...defaultStyle,
              ...transitionStyles[state]
          }}>
              I'm a fade Transition!
          </div>
          )}
      </Transition>
  );
  

• Использовать Fade и передавать обработчики в Transition, например onExited и установите там желаемые состояния.Fade просто передаст дополнительные реквизиты корневому элементу Transition, так что это может сработать.Единственное предостережение в том, что вы будете запускать фазу setState или аналогичную после render, которая может стать сложной.