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

我更新了状态，有一个悬停属性和两个鼠标输入/离开方法来设置绑定的值。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。

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

最后，实际的动画是用CSS动画完成的

transition: opacity 1s;

我希望这有助于