どのようにグロメットSideSplitコンポーネントを非表示にする

Question

私はグロメットのUIフレームワークを使用して、React/reduxアプリケーションを持っています。基本的な構造は次のとおりです。[設定]アイコンが画面いっぱいに<GLBoard />コンポーネントをできるように、クリックされていない限り、私は<GLNav />コンポーネントを非表示にすることがしたい

<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> 

。私はactive小道具をトグルし、<GLNav />コンポーネントのCSSクラスを切り替えるアイコンに接続された還元状態変数を持っています。 CSSは幅を0に設定して、NAVコンポーネントのスライドインとアウトを行います。

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

これはすべてChromeで完全に機能します。しかし、SideSplitコンポーネントが非モバイルモード（画面幅が750pxより大きい）の場合、active propがfalseで、CSSクラス.hideが適用されても、<GLNav />コンポーネントの幅の値があります。幅を750px未満に変更すると、グロメットはhiddenクラスを適用し、希望通りに<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

それが働いたように答えるために、私のコメントをコピー：ここ

は <GLNav />クラスです。

は、このソリューションは動作しますが、私はあなたが直接CSSを操作する必要がなく、やろうとしているものを達成するためのより良い方法があると信じて力.hideクラス最大幅0

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

Answer 2

にできます。

グロメットのアニメートユーティリティは見たことがありますか？

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

は、それはあなたが純粋に（それが舞台裏react-addons-transition-group使用しています）の要素を非表示にするには、CSSに依存することなく、要素を非表示にするアプローチを反応させ使用することができます。あなたの例では

私はこのようなものだろう：

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> 

    } 
}