如何隱藏索環SideSplit組件

我有一個使用索環ux框架的React/redux應用程序。其基本結構是：如何隱藏索環SideSplit組件

<App className="gol"> 
     <Article> 
     <GLHeader /> 
      <SideSplit active={props.nav} onResponsive={checkMobile} > 
      <GLNav /> 
      <GLBoard /> 
      </SideSplit> 
     <Footer colorIndex="neutral-1-a" justify="center">&copy;&nbsp;2016 </Footer> 
     </Article> 
    </App>

我想<GLNav />組件隱藏起來，直到被點擊設置圖標，允許<GLBoard />組件來填充屏幕。我有一個連接到圖標的redux狀態變量來切換active道具，並在<GLNav />組件上切換CSS類。 CSS的寬度設置爲0，這樣進出NAV組件幻燈片：

.hide{ 
    width: 0 !important; 
    transition: width .3s ease-out; 
} 
.show{ 
    transition: width .3s ease-out; 
}

所有這一切都完美的作品在Chrome中。但是，在Safari中，當SideSplit組件處於非移動模式（屏幕寬度大於750px）時 - 即使 prop爲false，並且應用了CSS類.hide - <GLNav />組件的寬度值也是如此。如果我將寬度更改爲小於750像素，則孔眼適用hidden類，並且會根據需要隱藏<GLNav />。

這裏是<GLNav />類：

const GLNav = props => { 
    return(
     <SideBar colorIndex="neutral-1-a" className={props.nav}> 
     <Header pad="medium" justify="between"> 
      <Title> 
      Settings 
      </Title> 
      <Button icon={<Close />} onClick={() => props.actions.toggleNav()} /> 
     </Header> 
    </SideBar> 
) 
}

來源

2016-12-02 genestd

注：我也嘗試過只渲染''組件點擊設置按鈕，當......當它正常工作，它不」在這種情況下，應用CSS過渡。 – genestd

嘗試添加'最大寬度：0;' –

這樣做 - 感謝您的提示！ – genestd

複製我的評論回答，因爲它的工作。

讓力.hide類最大寬度爲0

.hide{ 
    width: 0 !important; /* may be you don't need !important anymore */ 
    max-width: 0; 
    transition: width .3s ease-out; 
}

來源

2016-12-02 05:11:30

雖然這種解決方案的工作，我相信這是一個更好的方法來達到你正在嘗試做的，而不需要直接操作CSS。

您是否看過Grommet中的Animate實用程序？

https://grommet.github.io/docs/animate/examples/#1

它允許您使用純反應的方法來隱藏元素，而無需依賴於CSS來隱藏元素（它使用react-addons-transition-group幕後）。

在你的榜樣，我會做這樣的事情：

export default MyComponent extends Component { 
    state = { navActive: false } 

    render() { 
    const { navActive } = this.state; 

    let navNode; 
    if (navActive) { 
     navNode = (
     <Animate leave={{"animation": "slide-left", "duration": 1000}} 
      visible={true}> 
      <GLNav /> 
     </Animate> 
    ); 
    } 

    <App className="gol"> 
     <Article> 
     <GLHeader /> 
      <SideSplit active={props.nav} onResponsive={checkMobile} > 
      {navNode} 
      <GLBoard /> 
      </SideSplit> 
     <Footer colorIndex="neutral-1-a" justify="center">&copy;&nbsp;2016 </Footer> 
     </Article> 
    </App> 

    } 
}

來源

2016-12-02 17:53:22

我最初嘗試使用Animate組件，但似乎它一次爲div分配寬度，然後將組件動畫化到div中。這是一種脫節的用戶體驗。 – genestd

如何隱藏索環SideSplit組件

回答

相關問題