REACTJS _ eventListener-为什么我的事件监听器会触发几次？

Question

我正在尝试做that。在我的应用程序中，第一个动画序列中包含一些侦听器。我已确保在此初始pageEntering动画的结尾处删除这些侦听器。 然后，为组件的生命周期设置活动监听器。 问题是这些侦听器增加了，并且自身上有一种函数循环，我想是因为侦听器一次又一次触发该函数，直到程序停止，并且您会看到图像组件在发生时就消失了。 / em>

那为什么为什么要一次又一次地触发触发器，因为我已经确保它只能将侦听器设置一次？

Here my sandbox，这些侦听器允许触发进一步的动画以创建平滑的序列，此外，您还将观察到多个console.log，以帮助您欣赏重复循环的流程，

这是我的带有监听器设置链的reactJS代码段：

 componentDidMount() { 
    var textFirstLine=this.refs.textFirstLine;
    var textSecondLine= this.refs.textSecondLine;

    this.setState({firstLineAnimation:enterDownAnimation})

    if(this.state.initialLoop){
      // configure events listeners
      textFirstLine.addEventListener(
        "animationend", 
        (e) => {  
          this.setState({
            initialDelay:null,
            secondLineAnimation:enterDownAnimation,
          })        
      });    

      textSecondLine.addEventListener(
        "animationend", 
      (e) => {
        // remove initial listeners
        textFirstLine.removeEventListener('animationend', null, false);
        textSecondLine.removeEventListener('animationend', null, false);
        this.setState({
        imageAnimation:enterSideAnimation,
        initialLoop:false
        // textOpacity:1
      }, 

      () => this.setComponentListener());
    })
  }} 
  setComponentListener=()=>{  
    // set component's lifecycle listeners
    var textFirstLine=this.refs.textFirstLine;
    var textSecondLine=this.refs.textSecondLine     
    var viewImage=this.refs.viewImage
    var pageView=this.refs.pageView; 

    console.log("SET LISTENER :)")
    textFirstLine.addEventListener(
      "animationend", 
      (e) => { 
        // textFirstLine.removeEventListener('animationend', null, false);          console.log("textFirstLine achieved")
        this.setState({secondLineAnimation:this.state.firstLineAnimation})        
    });  

    textSecondLine.addEventListener(
      "animationend", 
      (e) => { 
        // textSecondLine.removeEventListener('animationend', null, false);
        // console.log("textSecondLine achieved")
        this.imageAnimationPrepare(e)        
    });  

    viewImage.addEventListener(
      "animationend", 
      (e) => { 
        console.log("imageAnimation achieved")
        this.moveView(e)   

    });  

    pageView.addEventListener("transitionend",()=> { 
      console.log("ANIMATION END :)")
      this.updateSlideData();   
    }, false);  

  } 

任何提示都会很棒， 谢谢

Answer 1

您真的需要使用javascript处理此动画吗？您可以使用唯一的CSS来制作带有关键帧的动画，并避免这种奇怪的行为。

h1 {
animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;
}


@keyframes slideDown {
	0% {
		transform: translateY(-100%);
	}
	50%{
		transform: translateY(8%);
	}
	65%{
		transform: translateY(-4%);
	}
	80%{
		transform: translateY(4%);
	}
	95%{
		transform: translateY(-2%);
	}			
	100% {
		transform: translateY(0%);
	}		
}

<div>
<h1>Veggie</h1>
<h1>Burguer</h1>
</div>

我知道这不是您当前问题的答案，但是也许您可以尝试使用此选项。

希望这会有所帮助！

Answer 2

解决方案是观察重复循环的区域，然后通过line.263中的简单条件中断冗余回调，如下所示：

// only if we are on a pageTransition sequence, updateSlideData
// if we are already on page, end the sequence  
if (this.state.exitLoop) this.updateSlideData();  

所有这些:)。事件监听器和所有操作，归纳起来都是运行良好且健康的。

感谢您的提示