Grommet SideSplit 구성 요소 숨기기 방법

Question

grommet ux 프레임 워크를 사용하는 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> 

. 아이콘에소품을 토글하고 <GLNav /> 구성 요소의 CSS 클래스를 토글하는 redux 상태 변수가 있습니다.

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

이 모든 크롬에서 완벽하게 작동합니다 : CSS는 그렇게에서 밖으로 NAV 구성 요소 슬라이드가 있음을 0으로 폭을 설정합니다. 그러나 Safari에서 SideSplit 구성 요소가 비 모바일 모드 (화면 폭이 750px 이상) 인 경우 - active 소품이 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> 

    } 
}