Javascript / CSS - CSS 动画后的旋转

如何解决Javascript / CSS - CSS 动画后的旋转

我目前正在处理 CSS 动画，但我遇到了一种我不明白的行为。

我有一个 div 容器，我为它设置了一个无限的 CSS 动画。动画只会来回旋转 div。在任何给定点，我想手动将 div 的旋转调整到特定的绝对角度（在我的情况下为 -90 度）。

我遇到的问题是，每当我（或animejs）在 CSS 动画开始后尝试将旋转设置为固定的 -90 度时，以下旋转在某种程度上取决于 CSS 动画的变化。之前我也试过暂停CSS动画没有成功。

我只想触发一个animejs动画，该动画总是从当前状态（由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>

如果您运行它并在初始状态下按 Q 或 E，它会将其旋转更改为 -90 或 180 度。如果按 S，它将启动 inifite CSS 动画。动画开始后，再次按Q或E（多次从Q切换到E看区别）。如您所见，它不会回到绝对的 -90 度。它似乎与某事有关，但我无法弄清楚是什么。当我尝试从当前状态平稳地转到 -90 度时，animejs 以同样奇怪的方式工作。

有什么办法可以避免这种行为吗？

顺便说一句。这是我在这里的第一个问题，所以我希望我没有做错什么;)

亲切的问候！

解决方法

试试这个：

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>