我有一个滚动文本div，我希望用户能够通过单击按钮暂停和恢复。以下是我创建过渡的方式：
words.style.webkitTransform = "translate3d(0px, -"+(27 * (words.children.length-4))+"px, 0px)";
words.style.webkitTransition = ((27 * words.children.length)/speed)+"s all linear";
我试图在暂停函数中将变换设置为“none”，但这只会使div回滚到之前的位置。它相当于translate3d（0px，0px，0px）。有没有一种简单地暂停当前动画的方法，还是我必须以某种方式测量当前的过渡位置？
更新：这是一个jsfiddle：http://jsfiddle.net/VAgXF/1/
答案 0 :(得分：1)
根据实例编辑
您可以在案例中使用WebKitCSSMatrix来获取translate3d值。我不知道它的所有选择器，但e是x而f是y，因此这段代码可以正常工作，因为您不更改{ {1}}
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";
}
}
这样简单，但它会使问题复杂化。