CSS-анимации запускают EventListeners более одного раза в Microsoft Edge - PullRequest
Новая
       7

CSS-анимации запускают EventListeners более одного раза в Microsoft Edge

0 голосов
/ 31 октября 2018

Ситуация такова, что я настраиваю стороннюю веб-платформу, созданную с помощью React. Позволяет добавить файл CSS и JS, в который будет загружаться после рендеринга веб-страницы, для настройки интерфейса.

Проблема в том, что некоторый контент генерируется динамически, поэтому код Javascript применяется только один раз в начале, но не для будущих вложенных элементов.

Учитывая, что CSS применяется всегда, я установил анимации для тех динамических элементов, которые будут прослушиваться из кода JS с помощью eventListeners и запускаться для каждого из них, как с MutationObserver.

Проблема: она работает как брелок во всех браузерах, кроме Edge, которые делают триггер, который работает как минимум 4 раза, но мне нужно только один раз. Он вызывает 4 раза, даже если я параметризирую eventListener с одним атрибутом. Но почему? Или как этого избежать в 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){}
        })();
...