在Transitionend事件監聽器中觸發事件監聽器？

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 hack heh ...令人驚訝的是...至少對於我想要達到的目的。 不知道這在實踐中是否很好。 但是基本上，我在CSS的地圖容器上應用了Z-Index為0，並且當容器處於活動狀態時，我使用setTimeout（）來增加Z-Index，並將間隔設置為3秒，因此Z-index不會踢直到過渡結束。

Java腳本

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){ 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及更高版本，您還可以添加

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

閱讀關於填充工具為transitionstart ：

• MadeByMike Codepen
• Javascript：是否有CSS過渡開始事件？ 這樣的問題。