Question

如何使用jQuery .animate()旋转元素？我正在使用下面的行，它正在正确地设置不透明度，但这是否支持CSS3转换？

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

Answer 1

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

我相信您可以使用step函数和用户浏览器的相应css3转换来完成此操作。 CSS3转换对于覆盖所有浏览器来说有点棘手（例如，IE6需要使用Matrix过滤器）。

编辑：这是一个适用于webkit浏览器的示例（Chrome，Safari）：http://jsfiddle.net/ryleyb/ERRmd/

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

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

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

Answer 2

Ryley's answer很棒，但我在元素中有文字。为了将文本与其他所有内容一起旋转，我使用了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度。

Here is the live demo

Answer 3

在我看来，与CSS3 animate相比，jQuery的transition有点过度使用，后者在任何2D或3D属性上执行此类动画。我也害怕，将它留给浏览器和by forgetting the layer called JavaScript could lead to spare CPU juice - 特别是当你想要用动画进行爆破时。因此，我喜欢使用样式定义的动画，因为您使用JavaScript定义功能。您注入JavaScript的演示文稿越多，您稍后将面临的问题就越多。

您所要做的就是将addClass用于您希望设置动画的元素，您可以在其中设置具有CSS transition属性的类。你只是“激活”动画，它在纯表示层上实现。

的.js

// with jQuery
$("#element").addClass("Animate");

// without jQuery library
document.getElementById("element").className += "Animate";

可以轻松地remove a class with jQuery或remove a class without library。

的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。

Answer 4

要添加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原型的代码。

Answer 5

只使用CSS过渡：

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

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

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

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

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

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

Answer 6

我偶然发现了这篇文章，希望在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)

Answer 7

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

Animate元素变换旋转

7 个答案: