マウスセンターとマウス離脱時のCSSトランジションの一時停止と再開

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

私のアプローチは、余分な時間変数を使用することでした。 誰かがこれをうまく見つけた場合は、回答済みおよび/または投票としてマークしてください。