Jquery 为元素变换旋转设置动画

如何使用jQuery的

.animate（）

旋转元素？我正在使用下面的线条，它当前正在正确地设置不透明度的动画，但是它支持CSS3变换吗

$(element).animate({
   opacity: 0.25,
   MozTransform: 'rotate(-' + -amount + 'deg)',
   transform: 'rotate(' + -amount + 'deg)'
});

---

据我所知，基本动画无法为非数字CSS属性设置动画

我相信您可以使用一个函数和适合用户浏览器的css3转换来完成这项工作。CSS3转换对于在IE6中覆盖所有浏览器来说有点棘手（例如，您需要使用矩阵过滤器）

编辑：下面是一个适用于webkit浏览器（Chrome、Safari）的示例：

如果您只想支持IE9，可以使用

transform

而不是

-webkit-transform

，或者

-moz-transform

将支持FireFox

使用的技巧是为我们不关心的CSS属性设置动画（

text indent

），然后在步长函数中使用其值进行旋转：

$('#foo').animate(
..
step: function(now,fx) {
  $(this).css('-webkit-transform','rotate('+now+'deg)'); 
}
...

很好，但是元素中有文本。为了将文本与其他内容一起旋转，我使用了边框间距属性而不是文本缩进

另外，为了澄清一点，在元素的样式中，设置初始值：

#foo{
边界间距：0px；
}

然后在“动画”块中，选择最终值：

$('#foo').animate({  borderSpacing: -90 }, {
    step: function(now,fx) {
      $(this).css('transform','rotate('+now+'deg)');  
    },
    duration:'slow'
},'linear');

在我的例子中，它逆时针旋转90度

---

.

要添加到Ryley和atonyc的答案中，您实际上不必使用真正的CSS属性，如

文本索引

或

边框间距

，而是可以指定一个伪CSS属性，如

旋转

或

我的精彩属性

。使用不会在将来成为实际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”对象的文档；其中有一个链接，指向该链接的部分似乎不存在。您可以在Github上找到Tween原型的代码）

在我看来，与在任何2D或3D属性上执行此类动画的CSS3

转换相比，jQuery的
动画
使用过度了一点。另外，我担心的是，把它留给浏览器，特别是，当你想与动画爆炸。因此，我喜欢样式定义所在的动画，因为可以使用JavaScript定义功能。您向JavaScript中注入的表示越多，以后遇到的问题就越多

您所要做的就是使用
addClass
来设置要设置动画的元素，其中设置了一个具有CSS
transition
属性的类。只需“激活”动画，该动画保持在纯表示层上实现的

.js

一个人可以很容易地，或者

.css

.html

.css

通过这种方式，您可以在动画中应用不同的样式，而无需加载不同的CSS文件。您只需要使用JavaScript来设置
类
我偶然发现了这篇文章，希望在jQuery中使用CSS转换来实现无限循环动画。这个对我很管用。不过我不知道这有多专业

//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');
            } 

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)

只需使用CSS转换：

$(element).css( { transition: "transform 0.5s",
                  transform:  "rotate(" + amount + "deg)" } );

setTimeout( function() { $(element).css( { transition: "none" } ) }, 500 );

例如，我将动画的持续时间设置为0.5秒

请注意
setTimeout
以在动画结束后（500毫秒）删除
transition
css属性


为了便于阅读，我省略了供应商前缀

此解决方案需要浏览器的过渡支持。
如果您不在其他任何地方使用z-index，则使用z-index也是一个不错的选择。但是你不想否定这个问题。你可能还想添加-ms-和-o-扩展（请参见）如何同时设置其他属性的动画？@MadTurki，我在下面回答了你的问题！jQuery实际上非常聪明，可以为您添加所有的-moz-、-webkit-，等等前缀，所以您可以稍微简化这段代码。回答得很好+1在代码维护和速度方面，这是一个痛苦的解决方案。忘记
jQuery
而
transform
ing，检查我的解决方案。如果您的值在旋转时一直在变化，而不是固定的值，该怎么办？这很好，但仅限于。所以，没有IE8或IE9。这是一个需要放弃的相当大的部分。@Ryley，你所说的用户。IE8或IE9用户低于5%。这不是一个可以放弃的很大的部分，因为我们仍然在谈论表示层，而不是功能。大约5%的访问者不会看到你的3D动画。此外，如果浏览器（IE）不支持
转换
，它肯定也不支持您的转换。这并不完全正确-
转换
受IE9支持。但我同意，它并不是最大的放弃用户群（IE8）。@Dyin它不是一个固定的12%，这取决于你的目标人口。根据谷歌分析，我公司50%的用户使用IE8。关键是要了解你的听众。话说回来：好极了，老兄！这个答案比前两个好得多。这也不包括动态旋转值。什么是myRotationProperty…是您自定义的吗；现在的
取决于这个属性。@MuhammadUmer-是的，
myRotationProperty
是定制的，一个伪造的CSS属性
now
是步骤回调函数的第一个参数，指定此步骤中对属性值的更改。然后您也在css中初始化了此属性。或者你可以把它设置为动画，它取为零。有一个jQuery插件可以设置CSS转换的动画。适用于Firefox、Chrome、Safari、Opera和
BODY.Alternative #element{
    color      : blue;
    transition : .5s linear;
}

//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');
            } 

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)

$(element).css( { transition: "transform 0.5s",
                  transform:  "rotate(" + amount + "deg)" } );

setTimeout( function() { $(element).css( { transition: "none" } ) }, 500 );