使用 jQuery 动画 CSS 转换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10966223/
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
Animating a CSS transform with jQuery
提问by Joey
I'm trying to animate a div, and get it to rotate about the y-axis 180 degrees. When I call the following code I get a jQuery error:
我正在尝试为 div 设置动画，并让它围绕 y 轴旋转 180 度。当我调用以下代码时，我收到一个 jQuery 错误：
$("#my_div").animate({
"transform": "rotateY(180deg)",
"-webkit-transform": "rotateY(180deg)",
"-moz-transform": "rotateY(180deg)"
}, 500, function() {
// Callback stuff here
});
});
It says "Uncaught TypeError: Cannot read property 'defaultView' of undefined" and says it's in the jQuery file itself... what am I doing wrong?
它说“未捕获的类型错误：无法读取未定义的属性 'defaultView'”并说它在 jQuery 文件本身中......我做错了什么？
回答by undefined
Try this:
尝试这个：
$('#myDiv').animate({ textIndent: 0 }, {
step: function(go) {
$(this).css('-moz-transform','rotate('+go+'deg)');
$(this).css('-webkit-transform','rotate('+go+'deg)');
$(this).css('-o-transform','rotate('+go+'deg)');
$(this).css('transform','rotate('+go+'deg)');
},
duration: 500,
complete: function(){ alert('done') }
});
回答by Jan Werkhoven
You can also predefine the rotation in a CSS class and use jQuery to add/remove the class:
您还可以在 CSS 类中预定义旋转并使用 jQuery 添加/删除该类：
CSS:
CSS：
#my_div {
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.rotate {
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
jQuery:
jQuery：
$("#my_div").addClass('rotate');
回答by Ignitor
jQuery cannot animate transform properties out of the box.
But you can animate custom properties with .animate()and do the transformation "manually" using the stepfunction:
jQuery 无法为开箱即用的转换属性设置动画。但是您可以.animate()使用以下step函数为自定义属性设置动画并“手动”进行转换：
var $myDiv = $("#my_div"),
ccCustomPropName = $.camelCase('custom-animation-degree');
$myDiv[0][ccCustomPropName ] = 0; // Set starting value
$myDiv.animate({ccCustomPropName : 180},
{
duration: 500,
step: function(value, fx) {
if (fx.prop === ccCustomPropName ) {
$myDiv.css('transform', 'rotateY('+value+'deg)');
// jQuery will add vendor prefixes for us
}
},
complete: function() {
// Callback stuff here
}
});
See this fiddlefor a working example (click on the blue box).
有关工作示例，请参阅此小提琴（单击蓝色框）。
This is similar to undefined's answerbut it doesn't abuse a real CSS property.
这类似于undefined 的答案，但它不会滥用真正的 CSS 属性。
Note:The name of the custom property should be a jQuery.camelCase()name since .animate()uses the camelCased names internally and therefore, will store the current value of the property using the camelCased name and the fx.propwill also be the camelCased name.
注意：自定义属性的名称应该是jQuery.camelCase()名称，因为.animate()在内部使用驼峰命名法，因此，将使用驼峰命名法存储属性的当前值，并且fx.prop也将是驼峰命名法的名称。
回答by Jan Werkhoven
Forget about jQuery's $.animate(), instead use $.velocity(). Velocity.jsis an animation extention of jQuery. It uses the same syntax as jQuery and allows you to animate CSS3 such as 3D transforms, translates, rotates, colour fading, transitions, skews, ... Anything you want. And since it is smart enough to use CSS3 instead of JS where possible, it animates with a better performance aswell. I don't understand why jQuery doesn't do this yet!
忘记 jQuery 的$.animate()，而是使用$.velocity(). Velocity.js是 jQuery 的动画扩展。它使用与 jQuery 相同的语法，并允许您为 CSS3 设置动画，例如 3D 变换、平移、旋转、褪色、过渡、倾斜……任何您想要的。而且由于它足够聪明，可以在可能的情况下使用 CSS3 而不是 JS，因此它的动画性能也更好。我不明白为什么 jQuery 还不这样做！
