jQuery动画a -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)。

为了避免更改有用的属性，您可以在那里提供任何属性。如下图所示：

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

因为我是火狐的粉丝，所以请添加这行代码来实现火狐兼容性，就像一样

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

Answer 2

我认为您可能正在尝试使jQuery本身不支持的属性具有动画效果，您最好的选择可能是使用这样的插件：http://ricostacruz.com/jquery.transit/

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

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