jquery - 无法与其他属性同时设置旋转动画，仅限 Safari(不适用于 Chrome)

Question

这个问题已经有答案了:

已关闭 11 年前。

Possible Duplicate:
Safari: Absolutely positioned DIVs not moving when updated via DOM

This answer另一个问题解释了一个小技巧，可以让您使用 jQuery 为元素的旋转设置动画。

在我的情况下，我想同时为元素的旋转及其 top: 和 left: 属性设置动画。所以我想出了this fiddle .

function transformThing() {
    $('#thing').animate({ top: '+=50', left: '+=50', borderSpacing: -90 }, {
        step: function(now,fx) {
            if(fx.prop === 'borderSpacing') {
                $(this).css('-webkit-transform','rotate('+now+'deg)');
                $(this).css('-moz-transform','rotate('+now+'deg)'); 
                $(this).css('transform','rotate('+now+'deg)'); 
            }
        },
        duration: 1000
    }, 'swing');
}
$(document).ready(function() {
    $('#thing').click(function () {
        transformThing();
    });
});

点击正方形应该旋转它并将其向下和向右移动。这就是它的作用，除了在 Safari 中。我在 Mac OS X 10.7.3 上运行 Safari 5.1.5，并且只有旋转动画。

同事发现this jQuery plugin这可以让你用更简洁的语法做同样的事情，但它表现出同样的问题。

如果您查看 Web Inspector，您可以看到 top: 和 left: 值发生变化，事实上它们已更改为正确的值；但它们不会影响元素的视觉布局，除非您将它们关闭然后再次打开。

显然，答案是“嗯，呃，这是 Safari 的一个错误。”但是有没有更深入的解释可以帮助我找到解决方法，或者我可以尝试的其他方法？

Answer 1

简短的回答是它在 Safari 中不起作用。但好消息是，如果您像下面的示例一样使用 Canvas ，它可以正常工作:http://beta.rallyinteractive.com/工作动画旋转/变换/动画 Sprite 。这确实是我能看到有人给你的唯一答案。