过渡结束后如何更改组件的显示属性？答案

【问题标题】：how to change display property of a component after transition ends?过渡结束后如何更改组件的显示属性？
【发布时间】：2020-07-29 13:18:20
【问题描述】：

Here you can see the instructions box>我正在开发一个相当简单的石头剪刀布游戏，以熟悉 React 和 React 样式组件。一开始有一个容器“规则”，弹出游戏说明。通过一个按钮，以后可以看到或看不到带有规则的容器。现在按钮的事件处理程序改变了我的容器的不透明度状态。但是，该组件仍然明显存在。我需要在“2s”时间内通过转换将其不透明度从“1”传递到“0”后，组件将其显示属性从“网格”传递到“无”。如果有人可以帮助我，我将不胜感激。

APP.JS

function App() {
      useEffect( () => {
        changeDisplay();
      }, [])
    
      const [opacity, setOpacity] = useState('0.5');
      const [display, setDisplay] = useState(true);
      const [rules, setRules] = useState(true);
    
      const changeDisplay = (displayValue) => {
        if(!displayValue){
          setDisplay(displayValue)
          setOpacity('0.5')
        }else if(displayValue){
          setDisplay(displayValue)
          setOpacity('1')
        }
      }
    
      const rulesSet = () => {
        if(rules){
          setRules(false)
        } else {
          setRules(true)
        }
      }
    
      return (
        <div id='backgroundImg'>
        <ExternalWrapper>
          <InternalWrapper opacity={opacity}>
            <LogoAndScore/>
            <Options></Options>
            <div  id="rulesButton" onClick={rulesSet}><h2>RULES</h2></div>
          </InternalWrapper>
            <Rules changeDisplay={changeDisplay} rules={rules}/>
        </ExternalWrapper>
        </div>
      );
}
    
export default App;

规则.JS

const WrapperRules = styled.div`
    transition: ease-out 500ms;
    background-color:white;
    border-radius:2rem;
    z-index:10;
    display:${props => props.display};
    grid-template-columns:1fr;
    grid-template-rows:60px 270px;
    height:fit-content;
    padding:30px;
    paddin-top:-20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, ${props => props.translate});
    opacity:${props => props.opacity}
    `
    
const WrapperX = styled.div`
    grid-row-start:1;
    grid-columnStart:1 ;
    width:fit-content ;
    margin:0px;
    justify-self:right ;
    align-self:start ;
    height:15px;
    transition:500ms;
    
    &:hover{
      transform:scale(1.2)
    }
    `
    
const Rules = ({ changeDisplay, rules }) => {
    
      const [opacity, setOpacity] = useState('0.1')
    
      useEffect(() => {
        hideRules()
      }, [rules])
    
      const [translate, setTranslate] = useState('-20%')
      const [display, setDisplay] = useState('grid')
    
      const hideRules = () => {
        opacity === '1' ? setOpacity('0') : setOpacity('1')
        translate === '-50%' ? setTranslate('-20%') : setTranslate('-50%')
        opacity === '1' ? changeDisplay(true) : changeDisplay(false);
      }
    
      return (HERE IT RENDER RULES)
    
}
    
export default Rules;

【问题讨论】：

标签： javascript css reactjs opacity display

【解决方案1】：

我建议在不透明度转换完成后添加 useEffect(s) 以将显示切换为“无”。相反，您需要在不透明度状态从“0”变为“1”之前将显示属性设置回“网格”。附加代码可能如下所示：

const Rules = ({ changeDisplay, rules }) => {

...

  useEffect(() => {
    if (opacity === '0') {
      setTimeout(() => {
        setDisplay('none');
      }, 500)
    }
  }, [opacity]);

  useEffect(() => {
    if (rules) {
      setDisplay('grid');
      setTimeout(() => {
        hideRules();
      });
    } else if (!rules) {
      hideRules();
    }
  }, [rules])

  ...
}

【讨论】：