jQuery 动画 -webkit-transform
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16958873/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery animate a -webkit-transform
提问by Ionic? Biz?u
Is it possible to use jQuery to animate a webkit translate3d?
是否可以使用 jQuery 为 webkit translate3d 设置动画？
I read that when using the animate property of jQuery that you must camel case the css properties but in the case of the translate3d this doesn't seem to work.
我读到，当使用 jQuery 的 animate 属性时，您必须将 css 属性设为驼峰式，但在 translate3d 的情况下，这似乎不起作用。
I have the following code that I would like to animate instead of it just happening immediately?
我有以下代码想要动画而不是立即发生？
$("#main-nav").css('-webkit-transform', "translate3d(0px, " + e + "px, 0px) scale(1)");
For clarification "e" is a variable that is passed to a function that my above code is run from.
为了澄清，“e”是一个变量，它被传递给运行我上面代码的函数。
回答by Ionic? Biz?u
Use a text-indentand it will work. Example:
使用 atext-indent它将起作用。例子：
$(".test").animate({ textIndent: 100 }, {
step: function(now,fx) {
$(this).css('-webkit-transform',"translate3d(0px, " + now + "px, 0px)");
},
duration:'slow'
},'linear');
Also, you can remove scale(1)from -webkit-transform.
此外，您可以scale(1)从-webkit-transform.
To avoid changing of a useful property you can give any property there. See the example bellow:
为了避免更改有用的属性，您可以在那里提供任何属性。请参阅下面的示例：
$(".test").animate({ whyNotToUseANonExistingProperty: 100 }, {
step: function(now,fx) {
$(this).css('-webkit-transform',"translate3d(0px, " + now + "px, 0px)");
},
duration:'slow'
},'linear');
And because I am a Firefox fan, please implement Firefox compatibility too adding this line, like here:
而且因为我是一个Firefox的粉丝，请执行Firefox的兼容性也加入这一行，就像这里：
$(this).css('-moz-transform',"translate3d(0px, " + now + "px, 0px)");
回答by Apqu
I think that you may be trying to animate a property that jQuery does not natively support, your best bet is probably to use a plugin such as this: http://ricostacruz.com/jquery.transit/
我认为您可能正在尝试为 jQuery 本身不支持的属性设置动画，最好的办法可能是使用这样的插件：http: //ricostacruz.com/jquery.transit/
Instead of then using the .animate function you would use .transition such as follows:
您可以使用 .transition 代替 .animate 函数，如下所示：
$("#main-nav").transition({ "-webkit-transform": "translate3d(0px, " + e + "px, 0px) scale(1)" });
回答by rb-
I do this by animating an arbitrary value then using the stepcallback to apply some CSS which I have written into a simple method. Perhaps some experts can chime in on why this is good or bad, but it works for me and doesn't force me to install any additional plugins. Here's an example.
我通过为任意值设置动画然后使用step回调来应用一些我已经写到一个简单方法中的 CSS 来做到这一点。也许一些专家可以解释为什么这是好的或坏的，但它对我有用并且不会强迫我安装任何额外的插件。这是一个例子。
In this example I apply a 100px transform then reduce it to 0 using the jQuery .animate()method.
在这个例子中，我应用了一个 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);
}
}
);
