Animate元素变换旋转

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的答案很棒,但我在元素中有文字.为了将文本与其他所有内容一起旋转,我使用了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度.

这是现场演示.

Answer 3

在我看来,animate与CSS3相比,jQuery 有点过度使用transition,后者在任何2D或3D属性上执行此类动画.另外,我担心,将它留给浏览器并忘记名为JavaScript的图层可能会导致CPU备用 - 特别是当您希望使用动画进行爆破时.因此,我喜欢使用样式定义的动画,因为您使用JavaScript定义了功能.您注入JavaScript的演示文稿越多,您稍后将面临的问题就越多.

您所要做的就是使用addClass要设置动画的元素,您可以在其中设置具有CSS transition属性的类.您只需"激活"动画,该动画将保留在纯表示层上.

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

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"对象的文档; 在animate文档页面中有一个指向http://api.jquery.com/Types#Tween的链接,这是一个没有的部分. "T似乎存在.你可以找到吐温原型在Github上的代码在这里).

Answer 5

只需使用CSS转换:

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

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

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

请注意动画结束后setTimeout删除transitioncss属性(500毫秒)

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

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