요소 페이드 인

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

예 CSS 클래스 토글 + 불투명도 전환 사용 :
이 https://jsfiddle.net/e7zwhcbt/2/

여기에 흥미로운 CSS의 :

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

나는 그것을 테스트하지 않은,하지만 그것을 작동합니다.