Question

可能重复：
Safari: Absolutely positioned DIVs not moving when updated via DOM

This answer另一个问题解释了一个小hack，它允许你使用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 bug。”但有没有更深层次的解释可以帮助我找到解决方法，或者我可以尝试的任何其他方法？

Answer 1

简短的回答是它不会在野生动物园工作。但好消息是，如果你使用像这样的画布，它可以正常工作：http://beta.rallyinteractive.com/工作动画旋转/变换/动画精灵。它真的是唯一可以看到有人给你的答案。

无法在其他属性中同时设置旋转动画，仅限Safari（不是Chrome）

1 个答案: