动画元素变换旋转

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) 设置动画，然后在 step 函数中使用它的值来进行旋转：

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

Answer 2

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

Here is the live demo.

Answer 3

在我看来，与 CSS3 transition 相比，jQuery 的 animate 有点过度使用，后者在任何 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 属性）并希望使用全局 0.5 秒动画即时更改样式时，我也会使用它。我向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');
            }