Question

我正在寻找一种中断动画并改变方向的方法，例如：

var elem = document.getElementById('elem');
var rightwards = false;
var leftKeyframe = { transform: 'translate(0)' };
var rightKeyframe = { transform: 'translate(200px, 0)' };

function toggledirection() {
    rightwards = !rightwards;

    if (rightwards) {
        elem.animate([leftKeyframe, rightKeyframe], 1000);
    } else {
        elem.animate([rightKeyframe, leftKeyframe], 1000);
    }
}

div {
  width: 50px;
  height: 50px;
  border: 3px solid grey;
}

<div id="elem"></div>
<button onclick="toggledirection();">Toggle Direction</button>

但是，请注意我必须如何定义每个动画的开始位置，所以当我中断正在运行的动画时，框会跳到新的起始位置并从那里开始。我希望这个盒子能从目前的任何地方开始like so（但这会使用CSS动画，而我正在寻找一个JS解决方案）。到目前为止，我唯一的方法是通过parsing the transform string检索当前的翻译，但我想知道是否有更简单的方法。

Answer 1

我做了几个测试：
- here (JsFiddle)使用元素计算样式来反转动画 - 和here (JsFiddle)在检查.reverse时使用动画playState原生方法。

在第一个小提琴中，我每按一次按钮就会启动一个新动画，所以当你在它仍在转换时反转时，即使元素距离目标点2 px，动画也需要1秒才能完成。

还要记住window.getComputedStyle(element)！== element.style

动画API：
- http://caniuse.com/#feat=web-animation
- https://developer.mozilla.org/en-US/docs/Web/API/Animation

<强>的getComputedStyle：
- https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

动画期间更改方向（使用vanilla JS动画）

1 个答案: