在动画期间改变方向（使用香草 JS 动画）答案

【问题标题】：Change Direction During Animation (using vanilla JS animations)在动画期间改变方向（使用香草 JS 动画）
【发布时间】：2016-02-10 07:01:48
【问题描述】：

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

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 检索当前翻译，但我想知道是否有更简单的方法。

【问题讨论】：

caniuse.com/#feat=web-animation 嗯，我不知道这个 API。但是，为什么不像您在“like so”链接中分享的示例那样提供 css/js 解决方案？
js 动画有更多的功能和灵活性，甚至可以是faster :O

标签： javascript animation

【解决方案1】：

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

在第一个小提琴中，我每次单击按钮都会启动一个新动画，因此，当您在它仍在过渡的同时反转时，即使元素距离目标点 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

【讨论】：

不知道 getComputedStyle，谢谢！！