如何設置顯示：在React中同時阻止和轉換不透明度？

Question

我在JSX定義的背景層元件，其具有設置display:none intially：

<div id="naviBG" style={naviBGStyleClone} role="button" onClick={this.onCloseClicked} /> 

風格：

const naviBGStyle = { 
    display: 'none', 
    opacity: 0, 
    transition: 'opacity 0.4s ease', 
}; 

單擊時，我想要的層順利地消失或重新使用出現在CSS中定義的轉換。在render()我是否應將元素顯示或隱藏：

渲染（）

const naviBGStyleClone = Object.assign({}, naviBGStyle); 
if (this.props.status === 'closed') { 
    naviBGStyleClone.display = 'none'; 
    naviBGStyleClone.opacity = 0; 
} else { 
    naviBGStyleClone.display = 'block'; 
    naviBGStyleClone.opacity = 1; 
} 

return (
    <div id="naviBG" style={naviBGStyleClone} role="button" onClick={this.onCloseClicked} /> 
); 

現在，這還挺工程作爲元素將顯示/隱藏地，但它沒有過渡動畫啪啪設置不透明度。

通常我會再使用類似​​來解決此像這樣：

渲染（）與英國皇家空軍：

const naviBGStyleClone = Object.assign({}, naviBGStyle); 
if (this.props.status === 'closed') { 
    naviBGStyleClone.display = 'none'; 
    if (typeof window !== 'undefined') { 
    window.requestAnimationFrame(() => { 
     naviBGStyleClone.opacity = 0; 
    }); 
    } 
} else { 
    naviBGStyleClone.display = 'block'; 
    if (typeof window !== 'undefined') { 
    window.requestAnimationFrame(() => { 
     naviBGStyleClone.opacity = 1; 
    }); 
    } 
} 

return (
    <div id="naviBG" style={naviBGStyleClone} role="button" onClick={this.onCloseClicked} /> 
); 

但這不會工作，作出反應，它會導致在render()之後要修改的樣式已經完成。

那麼，在React中做到這一點的正確方法是什麼？

Answer 1

由於過渡不會觸發通過display: none隱藏的項目，所以您可以在連續兩次調用setState，一次觸發顯示更改，然後再次觸發不透明度更改，並以相反的順序觸發它淡出然後隱藏。

class App extends React.Component { 
    state = { display: 'none', opacity: 0 } 

    toggle =() => { 
    if (this.state.display === 'none') { 
     this.setState({ display: 'block' }) 
     setTimeout(() => 
     this.setState({ opacity: 1 }), 10 // something very short 
    ) 
    } 
    if (this.state.display === 'block') { 
     this.setState({ opacity: 0 }) 
     setTimeout(() => 
     this.setState({ display: 'none' }), 300 // same as transition time 
    ) 
    } 
    } 

    render() { 
    return (
     <div> 
     <button onClick={this.toggle}>toggle</button>   
     <div 
      style={{ 
      transition: 'opacity 0.3s ease', 
      opacity: this.state.opacity, 
      display: this.state.display 
      }} 
     /> 
     </div> 
    ) 
    } 
} 

Example on codepen

我也會鼓勵你看看陣營運動處理更復雜的轉換像你可能會​​

https://github.com/chenglou/react-motion