如何隐藏Grommet SideSplit组件

Question

我有一个使用grommet ux框架的React/redux应用程序。基本结构是：

    <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组件处于非移动模式(屏幕宽度大于750 is )时--即使active支柱为false，并且应用了CSS类.hide -- <GLNav />组件具有一个宽度值。如果我将宽度更改为小于750 as，grommet将应用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>
  )
}

Answer 1

抄袭我的评论，以回答它的工作。

让.hide类的最大宽度为0

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

Answer 2

虽然这个解决方案有效，但我相信有一个更好的方法来实现您想要做的事情，而不需要直接操作css。

你看过Grommet的动画工具吗？

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

它允许您使用一种纯粹的react方法来隐藏元素，而不需要依赖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>

  }
}