jQuery动画-webkit-transform

Question

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

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

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

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

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

Answer 1

使用a text-indent它会起作用.例:

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

此外,您还可以删除scale(1)从-webkit-transform.

的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)" });