如何隐藏 Grommet SideSplit 组件答案

【问题标题】：How to hide Grommet SideSplit component如何隐藏 Grommet SideSplit 组件
【发布时间】：2016-12-03 01:53:22
【问题描述】：

我有一个使用 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 像素）时 - 即使 active 属性为 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>
  )
}

【问题讨论】：

注意：我还尝试在单击“设置”按钮时仅渲染 <GLNav> 组件...虽然它按预期工作，但在这种情况下它不会应用 CSS 过渡。
尝试添加max-width: 0;
做到了 - 感谢您的提示！
很高兴一切都很好，我会写这个作为答案。 :)

标签： css reactjs grommet

【解决方案1】：

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

您见过 Grommet 中的 Animate 实用程序吗？

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>

  }
}

【讨论】：

我最初尝试使用 Animate 组件，但它似乎一次性为 div 分配宽度，然后将组件动画化到 div 中。这是一种脱节的用户体验。

【解决方案2】：

复制我的评论以回答它的工作。

让我们强制 .hide 类的最大宽度为 0

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

【讨论】：