<Fade>在材质ui中只是禁用组件的可见性。如何获得淡入淡出效果并实际隐藏组件?

• 使用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>
  );
  

• 褪色 并将处理程序传递给 Transition onExited 在那里设置所需的状态。淡入淡出只是传递额外的道具到根过渡元素,所以这可能会工作。唯一要注意的是你会引发 setState render 可能会变得棘手的阶段。

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

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

默认情况下,子组件在达到“exited”状态后保持挂载状态。套 如果您希望在组件退出后卸载它。

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

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