CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Natesh bhat
Natesh bhat

Reputation: 13247

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

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>

Upvotes: 13

Views: 16574

Answers (4)

Aigars Matulis
Aigars Matulis

Reputation: 1529

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

Upvotes: 17

Tadej
Tadej

Reputation: 426

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

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

Upvotes: -1

Rogelio
Rogelio

Reputation: 1094

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>

Upvotes: 5

Mrchief
Mrchief

Reputation: 76238

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.

Upvotes: 11

Related Questions