Javascript 在mouseenter和mouseleave上暂停并重新启动CSS转换

我想知道如何暂停和重新启动CSS转换

代码段：

animationstate=“running”；
函数animate（）{
如果（animationstate==“正在运行”）{
deskppssystemdiv.style.transitionDuration=“2000ms”；
deskppssystemdiv.style.transitionTimeingFunction=“线性”；
deskppssystemdiv.style.transform=“旋转（45度）”；
}
}
制作动画（）；
deskppssystemdiv.addEventListener（“鼠标指针”，函数（事件）{
animationstate=“暂停”；
});
deskppssystemdiv.addEventListener（“鼠标移动”，函数（事件）{
animationstate=“正在运行”；
});

---

我想这可以通过

getComputedStyle

属性或

addClass

和

removeClass

来完成，但我被卡住了。

在做了一些测试之后，下面的代码现在适合我了：

var starttime=0
var stoptime=0
var runtime=0
var resttime=0
function animate(duration)
{
deskppssystemdiv.style.transitionDuration=duration
deskppssystemdiv.style.transitionTimingFunction="linear"
deskppssystemdiv.style.transform="rotate(45deg)"
}
starttime=Date.now()
animate("2000ms")
deskppssystemdiv.addEventListener("mouseenter",function()
{
stoptime=Date.now()
runtime=runtime+(stoptime-starttime)
resttime=2000-runtime
deskppssystemdiv.style.transform=getComputedStyle(deskppssystemdiv).
getPropertyValue("transform")
})
deskppssystemdiv.addEventListener("mouseleave",function()
{
starttime=Date.now()
animate(resttime+"ms")
})

我的方法是使用额外的时间变量。

---

如果有人认为这很有帮助，请标记为已回答和/或投票。

那么，转换的确切含义是什么？这是变换程度的变化：旋转（Xdeg）？另外，如果在转换完成后将鼠标移入，会发生什么？在转换完成后，不会发生任何事情。转换是transform:rotate（Xdeg）。如果它是动画，则更容易执行此操作，因为与转换不同，动画具有内置的

动画播放状态

属性。但我们不能总是用动画替换过渡，因为动画会自动运行，而过渡仅在状态发生更改时发生。如果您可以使用当前完整的代码（HTML、CSS和JS）创建一个最小的演示，那么它可能会更容易回答。