我可以在显示后禁用过渡吗？

Posted 2023-03-06

【中文标题】我可以在显示后禁用过渡吗？

【英文标题】：Can i disable a transition after it has once been displayed?

【发布时间】：2020-06-15 04:08:04

【问题描述】：

是否有可能在您将鼠标悬停在其上并且将鼠标移出然后再次悬停在其上时进行转换功能，不再起作用？所以在播放后禁用过渡。

谢谢

【问题讨论】：

欢迎来到 ***！抱歉，但您需要提供更多细节。你试过什么？你在用什么？您能否提供一个简单、最少的代码示例来说明您想要做什么？

您好，欢迎来到 *** :) 请访问 Help Center 并使用 tour 了解如何正确提问。

另外，可能是Run CSS3 animation only once (at page loading)的副本

【参考方案1】：

是的！可以在悬停时使用 javascript 更改过渡元素的类名。但是，当您将鼠标悬停在过渡元素上时，将在您的悬停样式之前调用 javascript 函数，即使是第一次也不会看到过渡。要解决此问题，您可以在第二次悬停时更改 className。以下是我在第二次悬停时更改为“demoover”的类名为“demo”的元素上的操作方式：

var timedHover=0;

function mouseOver() 
if(timedHover!=0)
document.getElementById("demo").className = "demoover";

timedHover=1;
 

.demo
     color:red;  
     transition: 1s;

.demo:hover
     color:pink; 

     
.demoover
     color:red;   

<h1 id="demo" class="demo" onmouseover="mouseOver()">Mouse over me</h1>