动画元素变换旋转

如何使用jQuery旋转元素.animate()？我正在使用下面的代码行，该代码行目前可以正确地对不透明度进行动画处理，但这是否支持CSS3转换？

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

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

我相信您可以使用步进功能和针对用户浏览器的适当的CSS3转换来完成此操作。CSS3转换在覆盖所有浏览器方面有些棘手（例如，您需要使用Matrix过滤器的IE6）。

编辑：这是在Webkit浏览器（Chrome，Safari）中工作的示例：http : //jsfiddle.net/ryleyb/ERRmd/

如果您只想支持IE9，则可以使用transform代替-webkit-transform，或者-moz-transform支持FireFox。

使用的技巧是为我们不关心的CSS属性设置动画text-indent，然后在step函数中使用其值进行旋转：

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

Ryley的答案很好，但我在元素中输入了文字。为了旋转文本以及其他所有内容，我使用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度。

这是现场演示。

在我看来，animate与CSS3相比，jQuery有点过用了，CSS3transition在任何2D或3D属性上执行这种动画。同样，我担心，将其留给浏览器并忘记称为JavaScript的层可能会导致CPU浪费-特别是当您希望播放动画时。因此，由于您使用JavaScript定义功能，因此我喜欢在样式定义所在的位置放动画。您向JavaScript中注入的演示文稿越多，以后您将面临的问题就越多。

您所要做的就是使用addClass要设置动画的元素，在其中设置具有CSStransition属性的类。您只需“激活”动画，即可在纯演示层上实现动画。

.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>

对于大多数用例而言，这是一种快速便捷的解决方案。

当我想实现不同的样式（替代CSS属性），并希望通过全局.5s动画即时更改样式时，也要使用此样式。我在中添加了一个新类BODY，同时以这种形式添加了替代CSS：

.js

$("BODY").addClass("Alternative");

.css

BODY.Alternative #element{
    color      : blue;
    transition : .5s linear;
}

这样，您可以对动画应用不同的样式，而无需加载不同的CSS文件。您只需要使用JavaScript来设置即可class。

要添加到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的链接，该链接没有“T似乎存在。你可以找到吐温原型在Github上的代码在这里）。

只需使用CSS过渡：

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

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

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

请注意，动画结束（500毫秒）后，请setTimeout删除transitioncss属性

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

此解决方案当然需要浏览器的过渡支持。

我偶然发现了这篇文章，希望将jQuery中的CSS转换用于无限循环动画。这对我来说很好。我不知道它有多专业。

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