變化方向在動畫（使用香草JS動畫）

我正在尋找一種方式來中斷了動畫，並改變方向，是這樣的：變化方向在動畫（使用香草JS動畫）

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檢索當前的翻譯，但我想知道是否有更簡單的方法。

來源

2016-02-10 woojoo666

http://caniuse.com/#feat=web-animation humm，我不知道這個API。但是，爲什麼不像您在「像這樣」鏈接中共享的示例那樣使用css/js解決方案？ – Saba

js動畫有更多的權力和靈活性，他們甚至可以[更快]（https://css-tricks.com/myth-busting-css-animations-vs-javascript/）：O – woojoo666