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

完全隐藏元素会引入复杂性，因为现在您必须在Fade开始时也取消隐藏该元素。这可能会影响淡入淡出效果。

话虽如此，您别无选择：

使用CSS属性选择器应用样式：

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

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

直接使用react-transition（因为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并在其中设置所需的状态。淡入淡出只会将额外的道具传递给根过渡元素，因此这可能会起作用。唯一的警告是，您将触发一个setState或类似的帖子render阶段，可能会很棘手。

Answer 2

SELECT add_months(date_trunc('month', CURRENT_DATE), -1) as start_date;

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

默认情况下，子组件在达到“退出”状态后仍保持挂载状态。如果您希望在组件退出完成后卸载组件，请设置 unmountOnExit 。

Answer 3

将您的自定义组件封装在div或一些html元素中，它应该可以正常工作

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

基于@Mrchief的回答，我对在Fade元素上使用style属性有了一个想法：

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

material-ui中的<fade>只是禁用了组件的可见性。如何获得淡入淡出效果并实际上隐藏组件？

4 个答案: