不能與其他屬性同時動畫旋轉，僅在Safari（不鍍鉻）

可能重複：
Safari: Absolutely positioned DIVs not moving when updated via DOM 不能與其他屬性同時動畫旋轉，僅在Safari（不鍍鉻）

This answer另一個問題解釋了小黑客，讓您使用jQuery來動畫元素的旋轉。

在我的情況，我想用它的頂部同時動畫元素的旋轉：左：性質。所以我想出了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檢查看，你可以看到頂部：左：值發生變化，而事實上他們改變到正確的值;但是它們不會影響元素的可視佈局，除非將其關閉並再次打開。

顯然，答案是：「嗯，真不錯，這是一個Safari瀏覽器的bug。」但有沒有更深入的解釋可以幫助我找到解決方法，或者我可以嘗試的其他任何方法？

來源

2012-04-11 75th Trombone

我有一個類似的問題，並在這裏找到我的答案：http://stackoverflow.com/questions/9471038/safari-absolutely-positioned-divs-not-moving-when-updated-via-dom總之，設置在setTimeout（）中自行旋轉樣式。或者，建議使用翻譯頂部/左側屬性而不是直接設置頂部/左側也可以修復它。 – Sembiance 2012-08-13 11:31:37

簡單的答案是它在Safari不會工作。但好消息是它可以很好地工作，如果你使用像這樣的畫布：http://beta.rallyinteractive.com/工作動畫旋轉/變換/動畫一個精靈。它真的是我能看到任何人給你的唯一答案。

來源

2012-04-15 16:32:27

不能與其他屬性同時動畫旋轉，僅在Safari（不鍍鉻）

回答

相關問題