在mouseenter和mouseleave上暫停並重新啓動CSS轉換

我想知道如何暫停和重新啓動CSS轉換。在mouseenter和mouseleave上暫停並重新啓動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做，但我堅持。

來源

2017-03-04 Juergen

那麼到底什麼是「過渡」？這是「變換：旋轉（Xdeg）」程度的變化嗎？另外，如果在轉換完成後移動鼠標，會發生什麼？ – Harry

轉換完成後，什麼都不應該發生。轉換是轉換：旋轉（Xdeg）。 – Juergen

如果它是一個動畫，它會更容易做到這一點，因爲動畫具有不同於轉換的內置「animation-play-state」屬性。但是我們不能總是用動畫來替代轉換，因爲動畫自動運行，而轉換僅在狀態發生變化時纔會發生。如果您可以使用完整的當前代碼（HTML，CSS和JS）創建一個最小化演示，那麼它可以使它更容易回答。 – Harry

做一些測試，下面的代碼，現在對我的作品後：

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

我的方法是使用額外的時間變量。如果有人發現這個有用，請標記爲已回答和/或投票。

來源

2017-03-05 10:37:13 Juergen

在mouseenter和mouseleave上暫停並重新啓動CSS轉換

回答

相關問題