jQuery 动画元素变换旋转
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5462275/
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
Animate element transform rotate
提问by kalpaitch
How would I rotate an element with a jQuery's .animate()? I'm using the line below, which is currently animating the opacity correctly, but does this support CSS3 transforms?
我将如何使用 jQuery 旋转元素.animate()？我正在使用下面的行，它当前正在正确地为不透明度设置动画，但这是否支持 CSS3 转换？
$(element).animate({
opacity: 0.25,
MozTransform: 'rotate(-' + -amount + 'deg)',
transform: 'rotate(' + -amount + 'deg)'
});
回答by Ryley
As far as I know, basic animates can't animate non-numeric CSS properties.
据我所知，基本动画不能为非数字 CSS 属性设置动画。
I believe you could get this done using a stepfunction and the appropriate css3 transform for the users browser. CSS3 transform is a bit tricky to cover all your browsers in (IE6 you need to use the Matrix filter, for instance).
我相信您可以使用步进函数和适用于用户浏览器的适当 css3 转换来完成此操作。CSS3 转换覆盖所有浏览器有点棘手（例如，IE6 需要使用矩阵过滤器）。
EDIT: here's an example that works in webkit browsers (Chrome, Safari): http://jsfiddle.net/ryleyb/ERRmd/
编辑：这是一个适用于 webkit 浏览器（Chrome、Safari）的示例：http: //jsfiddle.net/ryleyb/ERRmd/
If you wanted to support IE9 only, you could use transforminstead of -webkit-transform, or -moz-transformwould support FireFox.
如果您只想支持 IE9，则可以使用transform代替-webkit-transform，或者-moz-transform将支持 FireFox。
The trick used is to animate a CSS property we don't care about (text-indent) and then use its value in a step function to do the rotation:
使用的技巧是为我们不关心的 CSS 属性 ( text-indent)设置动画，然后在 step 函数中使用它的值来进行旋转：
$('#foo').animate(
..
step: function(now,fx) {
$(this).css('-webkit-transform','rotate('+now+'deg)');
}
...
回答by atonyc
Ryley's answeris great, but I have text within the element. In order to rotate the text along with everything else, I used the border-spacing property instead of text-indent.
Ryley 的回答很棒，但我在元素中有文字。为了与其他所有内容一起旋转文本，我使用了边框间距属性而不是文本缩进。
Also, to clarify a bit, in the element's style, set your initial value:
另外，为了澄清一点，在元素的样式中，设置初始值：
#foo {
border-spacing: 0px;
}
Then in the animate chunk, your final value:
然后在动画块中，您的最终值：
$('#foo').animate({ borderSpacing: -90 }, {
step: function(now,fx) {
$(this).css('transform','rotate('+now+'deg)');
},
duration:'slow'
},'linear');
In my case, it rotates 90 degrees counter-clockwise.
就我而言，它逆时针旋转 90 度。
回答by Dyin
In my opinion, jQuery's animateis a bit overused, compared to the CSS3 transition, which performs such animation on any 2D or 3D property. Also I'm afraid, that leaving it to the browser and by forgetting the layer called JavaScript could lead to spare CPU juice- specially, when you wish to blast with the animations. Thus, I like to have animations where the style definitions are, since you define functionality with JavaScript. The more presentation you inject into JavaScript, the more problems you'll face later on.
在我看来，animate与transition在任何 2D 或 3D 属性上执行此类动画的 CSS3 相比，jQuery 的使用有点过度。另外我担心，将它留给浏览器并通过忘记称为 JavaScript 的层可能会导致 CPU 空闲- 特别是当您希望播放动画时。因此，我喜欢在样式定义所在的位置制作动画，因为您使用 JavaScript 定义功能。注入 JavaScript 的演示越多，以后面临的问题就越多。
All you have to do is to use addClassto the element you wish to animate, where you set a class that has CSS transitionproperties. You just "activate" the animation, which stays implemented on the pure presentation layer.
您所要做的就是使用addClass要设置动画的元素，在其中设置一个具有 CSStransition属性的类。您只需“激活”动画，它就在纯表示层上实现。
.js
.js
// with jQuery
$("#element").addClass("Animate");
// without jQuery library
document.getElementById("element").className += "Animate";
One could easly remove a class with jQuery, or remove a class without library.
可以使用 jQuery轻松删除一个类，或者删除一个没有库的类。
.css
.css
#element{
color : white;
}
#element.Animate{
transition : .4s linear;
color : red;
/**
* Not that ugly as the JavaScript approach.
* Easy to maintain, the most portable solution.
*/
-webkit-transform : rotate(90deg);
}
.html
.html
<span id="element">
Text
</span>
This is a fast and convenient solution for most use cases.
对于大多数用例来说，这是一种快速方便的解决方案。
I also use this when I want to implement a different styling (alternative CSS properties), and wish to change the style on-the-fly with a global .5s animation. I add a new class to the BODY, while having alternative CSS in a form like this:
当我想要实现不同的样式（替代 CSS 属性），并希望使用全局 .5s 动画即时更改样式时，我也会使用它。我向 中添加了一个新类BODY，同时具有如下形式的替代 CSS：
.js
.js
$("BODY").addClass("Alternative");
.css
.css
BODY.Alternative #element{
color : blue;
transition : .5s linear;
}
This way you can apply different styling with animations, without loading different CSS files. You only involve JavaScript to set a class.
通过这种方式，您可以对动画应用不同的样式，而无需加载不同的 CSS 文件。您只需要使用 JavaScript 来设置class.
回答by skagedal
To add to the answers of Ryley and atonyc, you don't actually have to use a real CSS property, like text-indexor border-spacing, but instead you can specify a fake CSS property, like rotationor my-awesome-property. It might be a good idea to use something that does not risk becoming an actual CSS property in the future.
为了补充 Ryley 和 atonyc 的答案，您实际上不必使用真正的 CSS 属性，例如text-index或border-spacing，而是可以指定虚假的 CSS 属性，例如rotation或my-awesome-property。使用将来不会成为实际 CSS 属性的东西可能是个好主意。
Also, somebody asked how to animate other things at the same time. This can be done as usual, but remember that the stepfunction is called for every animated property, so you'll have to check for your property, like so:
此外，有人问如何同时为其他事物设置动画。这可以像往常一样完成，但请记住，step每个动画属性都会调用该函数，因此您必须检查您的属性，如下所示：
$('#foo').animate(
{
opacity: 0.5,
width: "100px",
height: "100px",
myRotationProperty: 45
},
{
step: function(now, tween) {
if (tween.prop === "myRotationProperty") {
$(this).css('-webkit-transform','rotate('+now+'deg)');
$(this).css('-moz-transform','rotate('+now+'deg)');
// add Opera, MS etc. variants
$(this).css('transform','rotate('+now+'deg)');
}
}
});
(Note: I can't find the documentation for the "Tween" object in the jQuery documentation; from the animate documentation pagethere is a link to http://api.jquery.com/Types#Tweenwhich is a section that doesn't appear to exist. You can find the code for the Tween prototype on Github here).
（注意：我在 jQuery 文档中找不到“Tween”对象的文档；从动画文档页面有一个指向http://api.jquery.com/Types#Tween的链接，这是一个没有'似乎不存在。您可以在此处在 Github 上找到 Tween 原型的代码）。
回答by Paolo
Just use CSS transitions:
只需使用 CSS 过渡：
$(element).css( { transition: "transform 0.5s",
transform: "rotate(" + amount + "deg)" } );
setTimeout( function() { $(element).css( { transition: "none" } ) }, 500 );
As example I set the duration of the animation to 0.5 seconds.
例如，我将动画的持续时间设置为 0.5 秒。
Note the setTimeoutto remove the transitioncss property after the animation is over (500 ms)
注意在动画结束后setTimeout移除transitioncss 属性（500 毫秒）
For readability I omitted vendor prefixes.
为了可读性，我省略了供应商前缀。
This solution requires browser's transition support off course.
这个解决方案当然需要浏览器的转换支持。
回答by Faradin
I stumbled upon this post, looking to use CSS transform in jQuery for an infinite loop animation. This one worked fine for me. I don't know how professional it is though.
我偶然发现了这篇文章，希望在 jQuery 中使用 CSS 变换来实现无限循环动画。这个对我来说效果很好。不知道专业度如何。
function progressAnim(e) {
var ang = 0;
setInterval(function () {
ang += 3;
e.css({'transition': 'all 0.01s linear',
'transform': 'rotate(' + ang + 'deg)'});
}, 10);
}
Example of using:
使用示例：
var animated = $('#elem');
progressAnim(animated)
回答by Colin Rickels
//this should allow you to replica an animation effect for any css property, even //properties //that transform animation jQuery plugins do not allow
function twistMyElem(){
var ball = $('#form');
document.getElementById('form').style.zIndex = 1;
ball.animate({ zIndex : 360},{
step: function(now,fx){
ball.css("transform","rotateY(" + now + "deg)");
},duration:3000
}, 'linear');
}
