要素がフェードインします

Question

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

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コンポーネントを表示したりしないようにどちらかの条件を使用しています。私は今それがフェードインしたい。私はBasketContentsにComponentDidMountフックを追加して不透明度を移行しようとしましたが、うまくいきません。これを行う簡単な方法はありますか？

Answer 1

例：

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

とレンダー機能：あなた `render`を何

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

Answer 2

私はこのような反応モーション使用します。

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

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

CSSクラストグル+不透明度遷移を使用して