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

Question

我正在尝试that 。在我的应用程序中，有第一个动画序列，其中有一些监听器。我已确保在初始 pageEntering 动画结束时删除这些监听器。然后我为组件的生命周期设置事件监听器。问题是这些监听器增加并且有一种函数在其自身上循环，我假设因为监听器一次又一次地触发该函数，直到程序停止，您将看到图像组件在发生时消失。

既然我已经确保它只设置监听器一次，为什么会一次又一次地触发呢？

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>

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

希望这有帮助!