使用 jQuery 对 CSS 变换进行动画处理
Posted
技术标签:
【中文标题】使用 jQuery 对 CSS 变换进行动画处理【英文标题】:Animating a CSS transform with jQuery 【发布时间】:2012-06-13 12:55:45 【问题描述】:我正在尝试为 div 设置动画,并让它围绕 y 轴旋转 180 度。当我调用以下代码时,我得到一个 jQuery 错误:
$("#my_div").animate(
"transform": "rotateY(180deg)",
"-webkit-transform": "rotateY(180deg)",
"-moz-transform": "rotateY(180deg)"
, 500, function()
// Callback stuff here
);
);
它说“Uncaught TypeError: Cannot read property 'defaultView' of undefined”并说它在 jQuery 文件本身中......我做错了什么?
【问题讨论】:
【参考方案1】:您还可以在 CSS 类中预定义旋转并使用 jQuery 添加/删除类:
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:
$("#my_div").addClass('rotate');
【讨论】:
【参考方案2】:试试这个:
$('#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')
);
http://jsfiddle.net/RPSzb/2/
【讨论】:
谢谢,我最终得到了一个名为 Transit 的插件,因为它似乎是进行#D 旋转的唯一方法...... 函数中的go参数是怎么定义的? @CosimowiSestep
是一个回调函数。回调函数的参数通过调用该函数的代码传递。在这种情况下,调用该函数的是 jQuery 内部代码。【参考方案3】:
jQuery 无法为开箱即用的变换属性设置动画。
但是您可以使用.animate()
为自定义属性设置动画,并使用step
function“手动”进行转换:
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
);
请参阅this fiddle 了解工作示例(单击蓝色框)。
这类似于undefined's answer,但它不会滥用真正的 CSS 属性。
注意:自定义属性的名称应该是 jQuery.camelCase() 名称,因为 .animate()
在内部使用驼峰命名,因此,将使用驼峰命名存储属性的当前值,并且fx.prop
也将是驼峰式名称。
【讨论】:
【参考方案4】:忘记 jQuery 的 $.animate()
,而是使用 $.velocity()
。 Velocity.js 是 jQuery 的动画扩展。它使用与 jQuery 相同的语法,并允许您对 CSS3 进行动画处理,例如 3D 变换、平移、旋转、褪色、过渡、倾斜……任何您想要的。而且由于它足够聪明,可以在可能的情况下使用 CSS3 而不是 JS,因此它的动画性能也更好。我不明白为什么 jQuery 还没有这样做!
http://julian.com/research/velocity/
【讨论】:
以上是关于使用 jQuery 对 CSS 变换进行动画处理的主要内容,如果未能解决你的问题,请参考以下文章