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');

此外，您可以从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兼容性，同时添加此行，例如here：

$(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);
  }
}
);

jQuery动画-webkit-transform

3 个答案: