2

可能重复：
Safari：绝对定位的 DIV 在通过 DOM 更新时不会移动

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

在我的情况下，我想为元素的旋转与它的 top: 和 left: 属性同时设置动画。所以我想出了这个小提琴。

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，并且只有旋转动画。

一位同事发现了这个 jQuery 插件，它可以让你用更简洁的语法做同样的事情，但它表现出同样的问题。

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

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

4

1 回答 1

1

简短的回答是它在野生动物园中不起作用。但好消息是，如果你使用像这个例子这样的画布，它工作得很好：http: //beta.rallyinteractive.com/工作动画旋转/变换/动画精灵。它真的是我能看到任何人给你的唯一类型的答案。

于 2012-04-15T16:32:27.817 回答