Question

我正在尝试设置-webkit-transform规则的动画。我试过了：

element.children().animate('webkitTransform': "translate3d(200px, 0, 0)", 200);
element.children().animate('WebkitTransform': "translate3d(200px, 0, 0)", 200);
element.children().animate('-webkit-transform': "translate3d(200px, 0, 0)", 200);

我错过了什么？

应用没有动画的CSS可以正常工作：

element.children().css('-webkit-transform', "translate3d(200px, 0, 0)");

如果我为margin-left等非前缀属性设置动画，也可以使用Animate。

Answer 1

您无法为此特定属性设置动画，因为它不是数字。前缀与此无关。来自docs：

所有动画属性都应设置为单个数值，除非如下所述;大多数非数字属性不能使用基本的jQuery功能动画

Answer 2

这是无效的Javascript。第一个参数需要是一个对象。即使使用正确的语法，我仍然不相信你可以动画这个属性。

element.children().animate({webkitTransform: "translate3d(200px, 0, 0)"}, 200);

但是，本文可能会帮助您：http://cameronspear.com/blog/animating-translate3d-with-jquery/

在jQuery中为前缀CSS规则制作动画

2 个答案: