javascript - Firefox 6 的平滑 CSS3 转换问题

Question

好的，我最初的问题是将一个元素从左向右移动。我选择的框架是 jQuery，所以我使用了 animate。

这是一个简单的例子。 http://jsfiddle.net/7NYwY/3/

在 firefox 中，动画期间在同一个地方大约有 3 个“停顿”。在 Chrome 中，这些不会出现。

所以我想我会进一步剥离它并使用 CSS3 过渡

http://jsfiddle.net/y6yW6/4/

而且我在同一个地方得到完全相同的“暂停”。我假设 jQuery 正在从我这里抽象出这些转换，所以它实际上是相同的代码。

所以问题是，我如何让这个相当简单的动画在 firefox 和 chrome 中顺利运行。

如果你想炫耀，jQuery 会很好，纯 JS。

Answer 1

您没有进行 CSS3 转换。这将在 Chrome/iOS/Android 中顺利运行:

var ele = $('#bike');

var dx = -500; // transformation
var duration = 3000; // duration in ms.
ele.css({ 
            '-webkit-transform': 'translate3d(' + -dx + 'px,0px,0px)', 
            '-webkit-transition-duration': (duration || 0) + 'ms', 
            '-webkit-backface-visibility': 'hidden', 
            '-webkit-transition-property': '-webkit-transform' 
});

Firefox 或多或少相同，但您可以很容易地解决这个问题。