关于react事件冲突

Question

假设当前有5个div，每个div都有一个hover事件，当hover时这个div会执行一段动画，当已匀速去依次hover时，事件效果正常，但当你迅速移过它们时，就会出现一个动画还没结束，另外一个动画又开始，该如何去避免这样的现像？
动画效果是用css3实现的。

我的做法是用setTimeout,但是，没有效果，所以向各位请教怎么处理这个问题？

大致的代码：

   enterFunc(index){
         this.setState({
             currenIndex:index
         })
   }

   render(){
       return (
            <div className="test">
                {   //class 'on'里有动画
                  this.props.arr.map((item,index) => {
                      <div 
                      className={this.state.currentIndex === index?'list on':'list'}
                      onMouseEnter={this.enterFunc.bind(this,index)}
                      >
                           //内容。。
                      </div>
                  })
                }
            </div>
       )
   }

Answer 1

使用一个布尔值变量来控制，当hover后，判断是否为真，为真，直接退出，否则设置为真，动画执行完后再设置为假

Answer 2

谢邀！

举个例子，每个定时器使用之前先关闭：

var timer = null; //定时器
timer = setInterval(function(){
    clearInterval(timer);//不管定时器开没开，都清除一次
    //这里再写其它代码
},1000);

Answer 3

:hover transition不可以？

Answer 4

onmouseout时，直接将这个动画样式移除掉。

Answer 5

不知道对不对， 是不是可以去监听 transitionend 事件，当你 鼠标 触发到当前元素，给置个标志 flag 我在过渡， 鼠标再 触发其他元素时，不会相应， 只有到 transitionend 触发， flag 表示过渡完毕， 其他元素可以过渡了。