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

admin管理员组

文章数量:1180482

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>

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>

• javascript
• reactjs
• material-ui

Share Improve this question Follow asked Oct 4, 2018 at 1:43 Natesh bhatNatesh bhat 13.2k1212 gold badges9393 silver badges131131 bronze badges 0

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 17

<Fade in={!randomizeFlag} unmountOnExit={true}>
  ...
</Fade>

http://reactcommunity.org/react-transition-group/transition#Transition-prop-unmountOnExit

By default the child component stays mounted after it reaches the 'exited' state. Set unmountOnExit if you'd prefer to unmount the component after it finishes exiting.

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.

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>

Based on @Mrchief answer I got an idea for using style attribute on Fade element:

<Fade in={!randomizeFlag} style={{display: randomizeFlag ? 'none' : 'block'}}>
   ...
</Fade>

本文标签：