Прослушивание прослушивателей событий внутри прослушивателя событий перехода?

Question

Я пытаюсь запустить прослушиватель событий mouseover, только когда завершится переход css. Я попытался предупредить случайное сообщение, когда css-переход завершается, и он работает по назначению (показывается только сообщение, когда оно заканчивается). Но по какой-то причине событие mouseover работает еще до завершения перехода.

Ниже представлен мой javascript. Спасибо заранее, ребята.

mapContainer.addEventListener("transitionend", function(){ 
    mapContainer.addEventListener("mousemove", function(e){ 
     if(e.clientX >= 200 && e.clientX <= 600){ 
      removeClass(mapContainer, "map-right"); 
      addClass(mapContainer, "map-left"); 
     } else if (e.clientX >= 900){ 
      removeClass(mapContainer, "map-left"); 
      addClass(mapContainer, "map-right");   
     } else { 
      removeClass(mapContainer, "map-left"); 
      removeClass(mapContainer, "map-right"); 
     } 
    }); 
}); 

ОБНОВЛЕНИЕ: Я использовал хакерский хакер Z-Index, который неожиданно работает ... по крайней мере, для того, чего я пытаюсь достичь. Не уверен, что это хорошо на практике. Но в основном я применяю Z-индекс 0 на контейнере карты в CSS, и когда контейнер активен, я использую setTimeout() для увеличения Z-индекса и устанавливаю интервал до 3 секунд, чтобы Z-индекс не делал ' t, пока не закончится переход.

Javascript

setTimeout(function(){ 
    campaignContainer.style.zIndex = "3"; 
    mapContainer.style.zIndex = "3"; 
}, 3000); 

CSS

.map-container { 
    height: 100%; 
    opacity: 0; 
    position: absolute; 
    transform: scale(2) rotate(30deg); 
    transition: all 1.2s linear; 
    width: 100%; 
    z-index: 0; 
} 

Answer 1

Вот то, что будет работать один раз в переходе:

var transitioned = document.getElementById("transition"); 
 
var show = document.getElementById("show"); 
 
var hasEnded = false; 
 

 
transitioned.addEventListener("transitionend", function(evt){ 
 
\t console.log("end") 
 
    hasEnded = true; 
 
}); 
 

 
transitioned.addEventListener("mousemove", function(evt){ 
 
    if(hasEnded) { 
 
     console.log("Mousemoving"); 
 
    } 
 
});

#transition { 
 
    background: yellow; 
 
    padding: 10px; 
 
    transition: all 1s linear; 
 
    -webkit-transition: all 1s linear; 
 
} 
 
#transition:hover { 
 
    background: red; 
 
}

<div id="transition"> 
 
Hover me! 
 
</div>

Кроме того, для IE10 и выше exlusively, вы можете также добавить

transitioned.addEventListener("transitionstart", function(evt){ 
    hasEnded = false; 
}); 

Читайте о polyfill для transitionstart:

• MadeByMike codepen
• Javascript: Is there a CSS transition start event? SO вопрос.