jQuery动画 -webkit-transform

Question

能否使用jQuery来动画化webkit translate3d？

我读到过当使用jQuery的animate属性时，必须驼峰命名CSS属性，但在translate3d的情况下似乎不起作用。

我有以下代码，我希望能够将其动画化而不是立即发生：

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

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

- user2440843

---

传递给animate函数时，camelCase不是必需的。 - A. Wolff

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

- Ionică Bizău

---

这里的text-indent是用来控制动画效果的，当动画触发时会调用step callback。建议使用opacity代替text-indent，如果被动画效果作用的元素包含其他元素，这样做不会改变预期的动画行为。示例代码：http://jsfiddle.net/xXWYW/2/ - A. Wolff

谢谢你们的回答和支持性评论，我已经成功地使用你们的JSFiddles作为基础来使它工作。 - user2440843

@user2440843，欢迎您。我们在这里也在学习，帮助他人。 :-) - Ionică Bizău

我认为这个答案不够充分，因为它限制了你只能使用 text-indent。有些情况下必须使用一个非本地支持的 CSS 属性，而不能用可以替代的属性。 - rb-

@A.Wolff 我不太明白为什么nonExistProperty应该能够工作，而当我删除nonExistProperty后它就再也不能工作了。你能给一个深入的解释吗？ - Peter Zhu

Answer 2

我认为你可能正在尝试动画一个jQuery不支持的属性，你最好使用像这样的插件： http://ricostacruz.com/jquery.transit/

而不是使用.animate函数，你应该使用.transition，如下所示：

$("#main-nav").transition({ "-webkit-transform": "translate3d(0px, " + e + "px, 0px) scale(1)" });

- Apqu

---

这只能通过jQuery本地支持来完成。请参见我的答案。 - Ionică Bizău

@John 很有趣的回答，每天都能学到新东西 +1 ;-) - Apqu

只是备注：jquery.transit使用CSS转换，这可能在您的目标设备上不受支持。 - eug

Answer 3

我通过对一个任意值进行动画处理，然后使用“step”回调来应用一些我写入一个简单方法中的CSS，从而实现此目的。也许一些专家可以发表自己的看法，这种方法好或坏有待商榷，但它对我很有效，而且不需要安装任何额外的插件。以下是一个示例。

在此示例中，我应用了一个100像素的变换，然后使用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);
  }
}
);

- rb-