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

Posted 2023-03-06

【中文标题】如何禁用过渡或动画时间的悬停效果，然后在过渡或动画在 css 中完成后启用它？

【英文标题】：How to disable hover effect for the transition or animation time then enable it after the transition or animation is finished in css?

【发布时间】：2020-07-24 21:25:41

【问题描述】：

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

#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);

【参考方案1】：

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

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