ReactJSコンポーネント:マウスのfadeIn/fadeOut-enter/mouse-leave

Question

私は単純なコンポーネントを作成しました reactjs （値ピッカーの種類: プランカー)

今、私はコントロールの上部と下部を非表示にしたい（opacity=0）とアニメーション化して、 opacity=1 ユーザーが中央をホバーすると div (.range-picker-selection）マウス付き。

私が操作できる方法がないので DOM 私のコンポーネントの関数から直接（reactjs これを落胆させます）私は状態を（次のようなものに）変更する必要があると思います state.expanded = true）に依存している reactjs 変更を反映するため。

しかし、どうすればアニメーション効果を達成できますか？
JQueryで私は使っていただろう element.animate({opacity:0}) しかし、今私はへのアクセス権を持っていません DOM

Answer 1

このような何か？

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

私は、ホバーされた属性と2つのマウスenter/leaveメソッドを持つように状態を更新して、バインドされている値を設定しました。range-picker-render関数内の選択要素

<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に設定するようにrender関数を更新しました。

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

最後に、実際のアニメーションはCSSアニメーションで行われます

transition: opacity 1s;

私はこれが役立つことを願っています