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;

我希望这会有所帮助

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

1 个答案: