在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 關于react事件沖突

關于react事件沖突

假設當前有5個div,每個div都有一個hover事件,當hover時這個div會執(zhí)行一段動畫,當已勻速去依次hover時,事件效果正常,但當你迅速移過它們時,就會出現(xiàn)一個動畫還沒結束,另外一個動畫又開始,該如何去避免這樣的現(xiàn)像?
動畫效果是用css3實現(xiàn)的。

我的做法是用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)}
                      >
                           //內(nèi)容。。
                      </div>
                  })
                }
            </div>
       )
   }
回答
編輯回答
苦妄

:hover transition不可以?

2018年7月12日 13:17
編輯回答
負我心

onmouseout時,直接將這個動畫樣式移除掉。

2017年12月2日 09:13
編輯回答
乞許

不知道對不對, 是不是可以去監(jiān)聽 transitionend 事件,當你 鼠標 觸發(fā)到當前元素,給置個標志 flag 我在過渡, 鼠標再 觸發(fā)其他元素時,不會相應, 只有到 transitionend 觸發(fā), flag 表示過渡完畢, 其他元素可以過渡了。

2018年1月25日 01:44
編輯回答
互擼娃

使用一個布爾值變量來控制,當hover后,判斷是否為真,為真,直接退出,否則設置為真,動畫執(zhí)行完后再設置為假

2018年1月6日 19:20
編輯回答
維他命

謝邀!

舉個例子,每個定時器使用之前先關閉

var timer = null; //定時器
timer = setInterval(function(){
    clearInterval(timer);//不管定時器開沒開,都清除一次
    //這里再寫其它代碼
},1000);
2018年9月22日 11:33