使用jQuery为CSS转换设置动画效果

Question

我正在尝试设置div的动画，并使其绕y轴旋转180度。当我调用下面的代码时，我得到一个jQuery错误：

$("#my_div").animate({
       "transform": "rotateY(180deg)",
       "-webkit-transform": "rotateY(180deg)",
       "-moz-transform": "rotateY(180deg)"
    }, 500, function() {
        // Callback stuff here
    });
});

它显示“未捕获的TypeError:无法读取未定义的属性'defaultView‘”，并表示它在jQuery文件本身中……我做错了什么？

Answer 1

您还可以在CSS类中预定义旋转，并使用jQuery添加/删除该类：

CSS：

#my_div {
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}
.rotate {
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

jQuery：

$("#my_div").addClass('rotate');

Answer 2

试试这个：

$('#myDiv').animate({ textIndent: 0 }, {
    step: function(go) {
      $(this).css('-moz-transform','rotate('+go+'deg)');
      $(this).css('-webkit-transform','rotate('+go+'deg)');
      $(this).css('-o-transform','rotate('+go+'deg)');
      $(this).css('transform','rotate('+go+'deg)');
    },
    duration: 500,
    complete: function(){ alert('done') }
});

http://jsfiddle.net/RPSzb/2/

Answer 3

jQuery无法为变换属性设置现成的动画。但是，您可以使用.animate()设置自定义属性的动画，并使用step function“手动”执行转换

var $myDiv = $("#my_div"),
    ccCustomPropName = $.camelCase('custom-animation-degree');
$myDiv[0][ccCustomPropName ] = 0; // Set starting value
$myDiv.animate({ccCustomPropName : 180},
    {
        duration: 500,
        step: function(value, fx) {
            if (fx.prop === ccCustomPropName ) {
                $myDiv.css('transform', 'rotateY('+value+'deg)');
                // jQuery will add vendor prefixes for us
            }
        },
        complete: function() {
            // Callback stuff here
        }
    });

有关工作示例，请参阅this fiddle (单击蓝色框)。

这类似于undefined's answer，但它不会滥用真正的CSS属性。

注意：自定义属性的名称应该是jQuery.camelCase()名称，因为.animate()在内部使用camelCased名称，因此将使用camelCased名称存储属性的当前值，并且fx.prop也将是camelCased名称。