Question

这种情况是，我正在定制使用React构建的第三方Web平台。它允许添加CSS和JS文件，在网页渲染后将其加载到该文件中以自定义界面。

问题在于某些内容是动态生成的，因此Javascript代码最初仅应用一次，但不适用于将来的嵌套元素。

鉴于CSS始终适用，我为动态元素设置了动画，这些动画将使用eventListener从JS代码中侦听，并为每个动画触发，例如MutationObserver。

问题：除Edge之外，在所有浏览器中它的作用都一样，它可使触发器至少运行4次，但我只需要一次。即使我使用一次属性参数化eventListener，它也会调用4次。但为什么？还是如何在Edge中避免它？

动画的CSS代码：

@keyframes messageModalShown {  
  from {  
    outline-color: rgba(255, 255, 255, .1); 
  }
  to {  
    outline-color: rgba(255, 255, 255, 0);
  } 
}

@-moz-keyframes messageModalShown {  
  from {  
    outline-color: rgba(255, 255, 255, .1); 
  }
  to {  
    outline-color: rgba(255, 255, 255, 0);
}  
}

@-webkit-keyframes messageModalShown {  
  from {  
    outline-color: rgba(255, 255, 255, .1); 
  }
  to {  
    outline-color: rgba(255, 255, 255, 0);
}  
}

@-ms-keyframes messageModalShown {  
  from {  
    outline-color: rgba(255, 255, 255, .1); 
  }
  to {  
    outline-color: rgba(255, 255, 255, 0);
  } 
}

@-o-keyframes messageModalShown {  
  from {  
    outline-color: rgba(255, 255, 255, .1); 
  }
  to {  
    outline-color: rgba(255, 255, 255, 0);
  } 
}

#compose-new-message .compose_form{
  animation-name: messageModalShown;
  -o-animation-name: messageModalShown;
  -ms-animation-name: messageModalShown;
  -moz-animation-name: messageModalShown;
  -webkit-animation-name: messageModalShown;
}

JS代码：

(function(){
            try{
            var count = 1,
                event = function(event){
                    if (event.animationName == 'messageModalShown') {
                        //MY CODE that triggers 4 times in EDGE
                    }
                }

            document.addEventListener('animationstart', event, false);
            document.addEventListener('MSAnimationStart', event, false);
            document.addEventListener('webkitAnimationStart', event, false);
            } catch(err){}
        })();

CSS动画在Microsoft Edge中多次触发eventListener

0 个答案: