Question

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

代码段：

animationstate = "running";

function animate() {
    if (animationstate == "running") {
        deskppssystemdiv.style.transitionDuration = "2000ms";
        deskppssystemdiv.style.transitionTimingFunction = "linear";
        deskppssystemdiv.style.transform = "rotate(45deg)";
    }
}
animate();

deskppssystemdiv.addEventListener("mouseenter", function(event) {
    animationstate = "paused";
});

deskppssystemdiv.addEventListener("mouseleave", function(event) {
    animationstate = "running";
});

我想这可以通过getComputedStyle属性或addClass和removeClass完成，但我被卡住了。

Answer 1

在做了一些测试后，以下代码现在适用于我：

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")
})

我的方法是使用额外的时间变量。如果有人发现这一点，请标记为已回答和/或投票。

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

1 个答案: