动画元素变换旋转
动画元素变换旋转
提问于 2011-03-29 00:46:22
如何使用jQuery的.animate()旋转元素？我使用的是下面这行代码，它当前正确地设置了不透明度的动画，但是它支持CSS3变换吗？
$(element).animate({
opacity: 0.25,
MozTransform: 'rotate(-' + -amount + 'deg)',
transform: 'rotate(' + -amount + 'deg)'
});回答 4
Stack Overflow用户
发布于 2011-04-20 23:42:15
Ryley's answer很棒，但是我在元素中有文本。为了将文本和其他内容一起旋转，我使用了边框间距属性，而不是文本缩进。
另外，为了明确一点，在元素的样式中设置初始值：
#foo {
border-spacing: 0px;
}然后在动画块中，您的最终值：
$('#foo').animate({ borderSpacing: -90 }, {
step: function(now,fx) {
$(this).css('transform','rotate('+now+'deg)');
},
duration:'slow'
},'linear');在我的例子中，它逆时针旋转90度。
Stack Overflow用户
发布于 2013-03-31 22:27:45
为了补充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“对象的文档；the animate documentation page中有一个指向http://api.jquery.com/Types#Tween的链接，这个部分似乎并不存在。你可以在Github here上找到Tween原型的代码。
Stack Overflow用户
发布于 2016-03-01 00:27:25
我偶然发现了这篇文章，希望在jQuery中使用CSS transform来实现无限循环动画。这个对我来说很好用。我不知道它有多专业。
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)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5462275
复制相关文章
相似问题