我正在尝试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);
}
任何提示都会很棒, 谢谢
最佳答案
你真的需要用 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>
我知道这不是您当前问题的答案,但也许您可以尝试这个选项。
希望这有帮助!
关于javascript - REACTJS _ eventListener - 为什么我的事件监听器触发多次?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54430448/