使用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
    });
});

它说“Uncaught TypeError: Cannot read property 'defaultView' of undefined”，并且说它在jQuery文件本身中... 我做错了什么吗？

- Joey

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

- Jan Werkhoven

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/

- Ram

---

谢谢，最终我选择了一个名为Transit的插件，因为似乎这是唯一实现#D旋转的方法... - Joey

你是如何在函数中定义go参数的？ - Cosimo wiSe

@CosimowiSe step 是一个回调函数。回调函数的参数是通过调用该函数的代码传递的。在这种情况下，是 jQuery 内部代码调用该函数。 - Ram

Answer 3

jQuery默认情况下无法对变换属性进行动画处理。但是您可以使用.animate()对自定义属性进行动画处理，并使用step函数手动执行变换：

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的答案类似，但它不会滥用真正的CSS属性。

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

- Ignitor

Answer 4

忘掉 jQuery 的 $.animate()，改用 $.velocity()。Velocity.js 是 jQuery 的一个动画扩展，使用与 jQuery 相同的语法，允许您动画 CSS3，如 3D 变换、平移、旋转、颜色淡入淡出、过渡、斜切等等。您想要的任何东西都可以实现。而且，由于它足够聪明，会尽可能使用 CSS3 而不是 JS，因此具有更好的性能。我不明白为什么 jQuery 还没有做到这一点！

http://julian.com/research/velocity/

- Jan Werkhoven

---

谢谢提供的信息，这个库解决了我的难题！ - Guilherme Lima