javascript - ReactJS component: fadeInfadeOut on mouse-entermouse-leave - Stack Overflow

admin管理员组

文章数量:1332896

I've created a simple ponent on reactjs (kind of a value-picker: plunker)

Now, I want the upper and lower parts of the control to be hidden (opacity=0) and animate to opacity=1 when user hovers the central div (.range-picker-selection) with mouse.

Since there's no way I can operate with DOM directly from functions of my ponent (reactjs discourages this) I guess I should change the state ( to something like state.expanded = true) and rely on reactjs to reflect the change.

But how can I achieve the animation effect?
With jQuery I would have used element.animate({opacity:0}) but now I don't have access to DOM

I've created a simple ponent on reactjs (kind of a value-picker: plunker)

Now, I want the upper and lower parts of the control to be hidden (opacity=0) and animate to opacity=1 when user hovers the central div (.range-picker-selection) with mouse.

Since there's no way I can operate with DOM directly from functions of my ponent (reactjs discourages this) I guess I should change the state ( to something like state.expanded = true) and rely on reactjs to reflect the change.

But how can I achieve the animation effect?
With jQuery I would have used element.animate({opacity:0}) but now I don't have access to DOM

• javascript
• css
• events
• reactjs

Share Improve this question Follow asked Jul 30, 2014 at 13:15 Artur UdodArtur Udod 4,75111 gold badge3434 silver badges5959 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Something like this?

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

I updated the state to have a hovered attribute and two mouse enter / leave methods to set the value which are bound the .range-picker-selection element in the render function

<div className="range-picker-selection" onMouseEnter={this.onMouseEnterHandler} onMouseLeave={this.onMouseLeaveHandler}>

  onMouseEnterHandler: function () {
    this.setState({
      hovered: true
    })
  },
  onMouseLeaveHandler: function () {
    this.setState({
      hovered: false
    })  
  },

I also updated the render function to set the opacity to 0 or 1 accordingly for the elements.

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

Finally, the actual animation is done with CSS animations

transition: opacity 1s;

I hope this helps

本文标签： javascriptReactJS component fadeInfadeOut on mouseentermouseleaveStack Overflow