<Fade> in material-ui just disables the visibility of the component . How to get the fade effect and actually hide the component ?

Question

I am using component of material-ui from 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>

I want to completely hide the element Grid when the component fades out but it only disables the visibility of the component and takes up the same space( looks empty) in the DOM .How do i make the element hide after fading it using <Fade>

Answer 1

enclose your custom components in divs or some html element and it should work just fine

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

Answer 2

Hiding element completely will introduce complexity since now you have to also unhide the element when Fade begins. That may interfere with fade effect.

With that said, you have few options:

• Use CSS attribute selectors to apply styles:

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

• Use react-transition directly (since that is what Fade uses): 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>
  );
  

• Use Fade and pass handlers to Transition, like onExited and set desired states in there. Fade will simply pass extra props to root Transition element so this may work. The only caveat is that you'd be triggering a setState or similar post render phase which can get tricky.