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或多或少相同，但您可以轻松摆弄它。

Firefox 6平滑的CSS3转换问题

1 个答案: