web-dev-qa-db-ja.com

Reactフェードイン要素

クリックしたときにBasketコンポーネントを切り替える必要があるBasketContentsコンポーネントがあります。これは動作します：

constructor() {
    super();
    this.state = {
      open: false
    }
    this.handleDropDown = this.handleDropDown.bind(this);
  }
  handleDropDown() {
    this.setState({ open: !this.state.open })
  }
    render() {
        return(
            <div className="basket">
                <button className="basketBtn" onClick={this.handleDropDown}>
                    Open
                </button>
              {
                this.state.open
                ?
                <BasketContents />
                : null
              }
            </div>
        )
    }

BasketContentsコンポーネントを表示するかしないかの条件を使用します。フェードインするようになりました。ComponentDidMountフックをBasketContentsに追加して、不透明度を切り替えようとしましたが、うまくいきません。これを行う簡単な方法はありますか？

javascriptcssreactjsfade
13
GluePear

Cssクラスの切り替えと不透明度の切り替えを使用した例：
https://jsfiddle.net/e7zwhcbt/2/

興味深いCSSを次に示します。

.basket {
  transition: opacity 0.5s;
  opacity: 1;
}
.basket.hide {
  opacity: 0;
  pointer-events:none;
}

そして、レンダリング機能：

render() {
    const classes = this.state.open ? 'basket' : 'basket hide'
    return(
      <div className="basket">
        <button className="basketBtn" onClick={this.handleDropDown}>
          {this.state.open ? 'Close' : 'Open'}
        </button>
        <BasketContents className={classes}/>
      </div>
    )
  }
12
Giladd

次のような反応モーションを使用します。

<Motion style={{currentOpacity: spring(this.state.open ? 1 : 0, { stiffness: 140, damping: 20 })}}>
    {({currentOpacity}) =>
        <div style={{opacity: currentOpacity}}>
            <BasketContents />
        </div>
    }
</Motion>

私はそれをテストしていませんが、うまくいくはずです。

3
Michal Cumpl

個人的にreact-animate-on-scrollを使用しました。 githubの作成者@dbramwellへの主要な小道具（意図的なしゃれ）。約5分で基準を並べ替えました。ブーム。 ????

0
NewbieAid