ReactJS组件:鼠标输入/鼠标离开时fadeIn/fadeOut

Question

我已经创建了一个简单的组件reactjs(一种值选择器:plunker)

现在,我希望控件的上部和下部隐藏(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-selection元素的值

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

我希望这有帮助