ReactJS组件:鼠标上的fadeIn/fadeOut-enter/mouse-leave
-
21-12-2019 - |
题
我在上面创建了一个简单的组件 reactjs
(有点价值选择者: 普朗克)
现在,我希望控件的上部和下部被隐藏(opacity=0
)和动画到 opacity=1
当用户悬停在中央 div
(.range-picker-selection
用鼠标。
因为我无法操作 DOM
直接从我的组件的功能(reactjs
劝阻这一点)我想我应该改变状态(到类似的东西 state.expanded = true
)并依靠 reactjs
以反映变化。
但是怎样才能达到动画效果呢?
使用jQuery我会使用 element.animate({opacity:0})
但现在我无法进入 DOM
解决方案
像这样的事?
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;
我希望这有助于
不隶属于 StackOverflow