停止translate3d转变

Question

我有一个滚动的文本div，我希望用户能够暂停并继续按一下按钮。下面是我如何创建过渡的方法：

words.style.webkitTransform = "translate3d(0px, -"+(27 * (words.children.length-4))+"px, 0px)";
words.style.webkitTransition = ((27 * words.children.length)/speed)+"s all linear";

我尝试在pause函数中将转换设置为"none“，但这只会使div返回到以前的位置。这相当于执行translate3d(0px，0px，0px)。是否有一种方法可以简单地暂停当前动画，或者我是否必须以某种方式测量当前的过渡位置？

更新:这是一个小提琴手：http://jsfiddle.net/VAgXF/1/

Answer 1

基于实例化的编辑

Try this demo instead

在您的情况下，您可以使用WebKitCSSMatrix获取translate3d值。我不知道它的所有选择器，但是e是x，f是y，所以这段代码可以工作，因为您不更改z

var words = document.getElementById("words");
var speed = 10;
words.style.webkitTransform = "translate3d(0px, -"+(27 * (words.children.length))+"px, 0px)";
words.style.webkitTransition = ((27 * words.children.length)/speed)+"s all linear";

var paused = false;
document.getElementById("button").onclick = function() {
  if(!paused) {
    var translated3D = new WebKitCSSMatrix(window.getComputedStyle(words, null).webkitTransform);
    words.style.webkitTransform = "translate3d(" + translated3D.e + "px, " + translated3D.f + "px, " + 0 + "px)";
    paused = true;
    button.innerHTML = "Start";
  } else {
    paused = false;
    button.innerHTML = "Stop";
    words.style.webkitTransform = "translate3d(0px, -"+(27 * (words.children.length))+"px, 0px)";
    words.style.webkitTransition = ((27 * words.children.length)/speed)+"s all linear";
  }
}

尽管如此，我还是会避免使用transform3d，因为它会使问题变得复杂。