如何在过渡或动画时间禁用悬停效果，然后在 css 完成过渡或动画后启用它？

Question

我想禁用或停用悬停效果，直到转换完成，然后重新激活悬停效果。所以，我只是想在一定时间内禁用悬停效果，以便完成过渡。我已经使用了 transition-delay 但这不是我想要的。先感谢您。这是我的代码。

#one
{
    color: green;
    border: 0px solid red;
    border-radius: 8px;
    transition: transform 1s;
    transition-delay: 0.3s;
}
/*I want to disable this hover until the transition is over*/
#one:hover
{
    color: white;
    background-color: rgba(255,0,0,1);
    border: 2px solid white;
    border-radius: 8px;
    box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.8);
    transform: translate(-15px,-15px) rotate3d(1,1,1,360deg) scale(1.1);
}

Answer 1

我会使用动画和一些 JavaScript 来处理这个问题。当用户将鼠标悬停在 #one 上时，我们将 hover class 添加到 body，#one 元素将对其进行响应。此时，#one 包括 pointer-events: none 以确保任何额外的悬停都不会重新触发动画。动画结束后，我们从 body 中删除 hover class，允许动画在注册新的悬停事件后再次开始。

const one = document.getElementById("one");

one.addEventListener("mouseover", () => {
  document.body.classList.add("hover"); 
});

one.addEventListener("animationend", () => {
  document.body.classList.remove("hover");
});

@keyframes oneAnimation {
  to {
    transform: translate(-15px, -15px) rotate3d(1, 1, 1, 360deg) scale(1.1);
  }
}

#one {
  color: green;
  border: 0px solid red;
  border-radius: 8px;
}

.hover #one {
  pointer-events: none;
  color: white;
  background-color: rgba(255, 0, 0, 1);
  border: 2px solid white;
  border-radius: 8px;
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.8);
  animation: oneAnimation 1s forwards 0.3s;
}

<div id="one">one</div>

jsFiddle

如何在过渡或动画时间禁用悬停效果，然后在 css 完成过渡或动画后启用它？

How to disable hover effect for the transition or animation time then enable it after the transition or animation is finished in css?

css

animation

transform

hover