停止 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";

我尝试在暂停功能中将转换设置为“无”，但这只会使 div 滚动回原来的位置。这相当于执行 translate3d(0px, 0px, 0px)。有没有一种方法可以简单地暂停当前动画，或者我必须以某种方式测量当前的过渡位置？

更新：这是一个 jsfiddle：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 来处理一些简单的问题，但它会使问题复杂化。