0

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小道具を切り替え、コンポーネントの CSS クラスを切り替え<GLNav />ます。CSS は幅を 0 に設定して、NAV コンポーネントがスライドインおよびスライドアウトするようにします。

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

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

2 に答える 2

1

このソリューションは機能しますが、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-02T17:53:22.917 に答える
0

私のコメントをコピーして、うまくいったので答えます。

.hideクラスの最大幅を 0 に強制しましょう

.hide{
  width: 0 !important; /* may be you don't need !important anymore */
  max-width: 0;
  transition: width .3s ease-out;
}
于 2016-12-02T05:11:30.443 に答える