ReactJS 구성 요소:fadeIn/페이드 아웃에-마우스를 입력하우스-남

Question

내가 만들어 간단한 구성 요소에 reactjs (종류의 값을 선택: plunker)

지금 내가 원하는 상단과 하단 부분의 제어를 숨기(opacity=0 다)및 애니메이션 opacity=1 할 때 사용자가 중 div (.range-picker-selection)와 마우스입니다.

이 방법은 없으로 운영할 수 있습니다 DOM 에서 직접 기능의 구성 요소(reactjs 낙담이)나는 내가 변경되어야 합 상태(무언가 state.expanded = true 고)에 의존 reactjs 하여 변경 내용을 반영합니다.

하지만 어떻게를 달성할 수 있는 애니메이션 효과는?
와가 사용되는 element.animate({opacity:0}) 하지만 지금은에 액세스할 수 없 DOM

Answer 1

무언가가 이것을 좋아하는가?

http://plnkr.co/edit/5tLWNTtpsSWBUCgnKwQO?p=preview

업데이트 상태를 맴돌고 특성과 두 개의 마우스를 입력/떠날을 설정하는 방법에는 값밖에 없다.범위를 선택 선택 요소를 렌더링 기능

<div className="range-picker-selection" onMouseEnter={this.onMouseEnterHandler} onMouseLeave={this.onMouseLeaveHandler}>

  onMouseEnterHandler: function () {
    this.setState({
      hovered: true
    })
  },
  onMouseLeaveHandler: function () {
    this.setState({
      hovered: false
    })  
  },

또한 업데이트 렌더링 기능을 설정의 투명도가 0 또는 1 그에 따라 위한 요소입니다.

style={{opacity: this.state.hovered ? 1 : 0}}

마지막으로,실제적인 애니메이션으로 수행 CSS 애니메이션

transition: opacity 1s;

이 도움이 되었으면 좋겠습니다