1

我有一个滚动文本 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/

4

1 回答 1

1

根据现场示例进行编辑

试试这个演示

您可以WebKitCSSMatrix在您的情况下使用来获取translate3d值。我不知道它的所有选择器，但是eisx和fis 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一些这样简单的事情，但它会使问题复杂化。

于 2013-09-02T14:47:59.820 回答