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不会＆＃ 39;开始直到过渡结束。

的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){
	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的填充：

在transitionend事件监听器中触发事件监听器？

1 个答案: