javascript - ReactJS 组件 : fadeIn/fadeOut on mouse-enter/mouse-leave

Question

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

现在，我希望隐藏控件的上部和下部 (opacity=0) 并在用户将鼠标悬停在中央 时动画化为 opacity=1 >div (.range-picker-selection) 用鼠标。

因为我无法直接从我的组件的函数中操作 DOM(reactjs 不鼓励这样做)我想我应该改变状态(到 state.expanded = true) 并依靠 reactjs 来反射(reflect)变化。

但是如何实现动画效果呢？
使用 jQuery 我会使用 element.animate({opacity:0}) 但现在我无法访问 DOM

Answer 1

是这样的吗？

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

我将状态更新为具有悬停属性和两个鼠标进入/离开方法来设置绑定(bind)到渲染函数中的 .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;

希望对你有帮助