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

使用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);
  }
}
);