Javascript / CSS - 在 CSS Z6F1C25ED1523962F1BBF9DEE9BE509 之后旋轉

Question

我現在正在搞亂 CSS 動畫，我遇到了我不理解的這種行為。

我有一個 div 容器，我在其中設置了一個無限的 CSS animation。 animation 只會來回旋轉 div。 在任何給定點，我都想手動將 div 的旋轉調整到特定的絕對角度（在我的情況下為 -90 度）。

The problem I'm experiencing is, that whenever I (or animejs) is trying to set the rotation to the fixed -90 degrees after the CSS animation has started, the following rotation somehow depends on the CSS animation changes. 我也嘗試過暫停 CSS animation 之前沒有成功。

我只想觸發一個animejs animation，它總是從當前的state（由CSS動畫給出）平穩地達到-90度。

這是我正在談論的一個例子：

 var div = document.getElementById('testdiv'); document.addEventListener('keypress', function onPress(event) { div.style.animationPlayState = 'paused'; if (event.key == 'q') { div.style.transform = 'rotate(-90deg)'; } if(event.key == 'e') { div.style.transform = 'rotate(180deg)'; } if(event.key == 's') { div.style.animationPlayState = 'running'; } });

 @keyframes animation { to { transform: rotate(15deg); } } #testdiv { position: absolute; background-color: black; margin: auto; margin-top: 50px; width: 200px; height: 150px; animation-name: animation; animation-duration: 1s; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: forwards; animation-play-state: paused; }

 <div id="testdiv"></div>

https://jsfiddle.net/Ls1ytf4h/

<div id="testdiv"></div>

如果您運行此程序並在其初始 state 中按 Q 或 E，它將將其旋轉更改為 -90 或 180 度。 如果按 S，它將啟動 inifite CSS animation。 animation啟動后，再按Q或E（從Q切換到E多次看區別）。 如您所見，它不會 go 回到絕對 -90 度。 它似乎相對於某些東西起作用，但我不知道是什么。 當我嘗試將 go 從當前的 state 平穩地調整到 -90 度時，animejs 以同樣奇怪的方式工作。

有沒有辦法避免這種行為？

順便提一句。 是我在這里的第一個問題，所以我希望我沒有做錯什么；）

親切的問候！

Answer 1

試試這個：

 var div = document.getElementById('testdiv'); document.addEventListener('keypress', function onPress(event) { div.style.animationPlayState = 'paused'; div.style.animationName = 'none'; if (event.key == 'q') { div.style.transform = 'rotate(-90deg)'; } if(event.key == 'e') { div.style.transform = 'rotate(180deg)'; } if(event.key == 's') { div.style.animationName = 'animation'; div.style.animationPlayState = 'running'; } });

 @keyframes animation { to { transform: rotate(15deg); } } #testdiv { position: absolute; background-color: black; margin: auto; margin-top: 50px; width: 200px; height: 150px; animation-name: animation; animation-duration: 1s; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: forwards; animation-play-state: paused; }

 <div id="testdiv"></div>