如何在jQuery的.animate()
中旋转一个元素?我当前正在使用下面的代码行,它可以正确地动画化透明度,但是它支持CSS3变换吗?
$(element).animate({
opacity: 0.25,
MozTransform: 'rotate(-' + -amount + 'deg)',
transform: 'rotate(' + -amount + 'deg)'
});
如何在jQuery的.animate()
中旋转一个元素?我当前正在使用下面的代码行,它可以正确地动画化透明度,但是它支持CSS3变换吗?
$(element).animate({
opacity: 0.25,
MozTransform: 'rotate(-' + -amount + 'deg)',
transform: 'rotate(' + -amount + 'deg)'
});
transform
而不是 -webkit-transform
,而使用 -moz-transform
则支持 FireFox。text-indent
)进行动画处理,然后使用其值在 step 函数中执行旋转。$('#foo').animate(
..
step: function(now,fx) {
$(this).css('-webkit-transform','rotate('+now+'deg)');
}
...
jQuery
,请查看我的解决方案。 - DyinRyley的回答很好,但我的元素中有文字。为了使文本随其他内容一起旋转,我使用了border-spacing属性而不是text-indent。
另外,为了澄清一点,在元素的样式中,设置初始值:
#foo {
border-spacing: 0px;
}
然后在动画块中,您的最终值为:
$('#foo').animate({ borderSpacing: -90 }, {
step: function(now,fx) {
$(this).css('transform','rotate('+now+'deg)');
},
duration:'slow'
},'linear');
在我的情况下,它逆时针旋转了90度。
这里是实时演示。transition
相比,jQuery的animate
有点被过度使用了,因为它可以在任何2D或3D属性上执行动画。此外,我担心只让浏览器忘记了名为JavaScript的层可能会导致节省CPU资源 - 特别是当你希望用动画爆发时。因此,我喜欢在样式定义中使用动画,因为你用JavaScript定义功能。你注入的JavaScript越多,以后遇到的问题就越多。addClass
,在其中设置一个具有CSS transition
属性的类。你只需“激活”动画,它将实现在纯演示层上。
.js
// with jQuery
$("#element").addClass("Animate");
// without jQuery library
document.getElementById("element").className += "Animate";
你可以通过jQuery 删除一个类 或者 不使用库来删除一个类。
.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
<span id="element">
Text
</span>
$("BODY").addClass("Alternative");
.css
BODY.Alternative #element{
color : blue;
transition : .5s linear;
}
class
即可。transition
),那么它肯定也不会支持你的变换(transformations
)。 - Dyintransform
在IE9上得到了支持。 但我同意,放弃IE8并不是最大的用户群。 - Ryley在Ryley和atonyc的答案中,可以不必使用真正的CSS属性,例如text-index
或border-spacing
,而是可以指定一个虚假的CSS属性,例如rotation
或my-awesome-property
。最好使用一些未来不会成为实际CSS属性的东西。
此外,有人问如何同时动画其他内容。这可以像往常一样完成,但请记住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)');
}
}
});
(注意:我找不到jQuery文档中“Tween”对象的文档;从动画文档页面中,有一个链接指向http://api.jquery.com/Types#Tween,但这个部分似乎不存在。你可以在这里的Github上找到Tween原型代码)。
myRotationProperty
是一些自定义的东西,一个虚构的CSS属性。now
是step回调函数的第一个参数,指定此步骤中属性值的更改。 - skagedal只需使用CSS过渡效果:
$(element).css( { transition: "transform 0.5s",
transform: "rotate(" + amount + "deg)" } );
setTimeout( function() { $(element).css( { transition: "none" } ) }, 500 );
function progressAnim(e) {
var ang = 0;
setInterval(function () {
ang += 3;
e.css({'transition': 'all 0.01s linear',
'transform': 'rotate(' + ang + 'deg)'});
}, 10);
}
使用示例:
var animated = $('#elem');
progressAnim(animated)
//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');
}