jQuery动画一个-webkit-transform

是否可以使用jQuery动画webkit translate3d？

我读到，当使用jQuery的animate属性时，你必须使用css属性，但在translate3d的情况下，这似乎不起作用。

我有以下代码，我想动画而不是它立即发生？

$("#main-nav").css('-webkit-transform', "translate3d(0px, " + e + "px, 0px) scale(1)"); 

为了澄清“e”是一个传递给我上面的代码运行的函数的变量。

Answer 1

使用text-indent ，它将起作用。 例：

 $(".test").animate({ textIndent: 100 }, { step: function(now,fx) { $(this).css('-webkit-transform',"translate3d(0px, " + now + "px, 0px)"); }, duration:'slow' },'linear'); 

此外，您可以从-webkit-transform删除scale(1) 。

的jsfiddle

为了避免更改有用的属性，您可以在那里提供任何属性。 见下面的例子：

 $(".test").animate({ whyNotToUseANonExistingProperty: 100 }, { step: function(now,fx) { $(this).css('-webkit-transform',"translate3d(0px, " + now + "px, 0px)"); }, duration:'slow' },'linear'); 

的jsfiddle

因为我是Firefox的粉丝，请实现Firefox兼容性，添加此行，如下所示：

 $(this).css('-moz-transform',"translate3d(0px, " + now + "px, 0px)"); 

Answer 2

我认为你可能试图动画jQuery本身不支持的属性，你最好的选择可能是使用这样的插件： http ： //ricostacruz.com/jquery.transit/

而不是使用.animate函数，您将使用.transition，如下所示：

 $("#main-nav").transition({ "-webkit-transform": "translate3d(0px, " + e + "px, 0px) scale(1)" }); 

Answer 3

我通过设置任意值的动画，然后使用step回调将我编写的一些CSS应用到一个简单的方法中。 也许一些专家可以说明为什么这是好的或坏的，但它对我有用，并没有强迫我安装任何额外的插件。 这是一个例子。

在这个例子中，我应用了100px变换，然后使用jQuery .animate()方法将其缩小为0。

 var $elem , applyEffect ; $elem = $('.some_elements'); applyEffect = function ($e, v) { $e.css({ '-webkit-transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)' , '-moz-transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)' , 'transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)' }); }; applyEffect($elem, 100); $elem.animate({ foo: 100 }, { duration: 1000 , step: function (v) { applyEffect($elem, 100 - v); } } );