问题描述
我目前正在处理 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>