如何隐藏索环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组件

回答

相关问题