Chrome 21縮放元素在旋轉過程中

我認爲這是最新的Chrome（21.0.1180.57）中的一個錯誤，但我想我會在這裏發帖只是爲了仔細檢查。Chrome 21縮放元素在旋轉過程中

我正在改變使用JavaScript的元素的旋轉，並使用webkit轉換來動畫旋轉。有時，根據開始和結束旋轉，元素隨着旋轉隨機縮放。我在這裏做了一個演示：http://jsfiddle.net/XCwUQ/（點擊正文）。

有誰知道爲什麼會發生這種情況？

乾杯，

基督教

來源

2012-08-02 Christian Varga

我無法在Linux上使用Chrome 21重現此操作。 – Blender 2012-08-02 01:11:22

有趣的是，對我來說，Windows和OSX上的錯誤似乎很明顯，但我沒有Linux來測試。 – 2012-08-02 03:46:12

也有這個問題，動畫會顯示它的第一幀，並保持這種狀態，如果它是一個關鍵幀動畫，它會顯示動畫結束時的最後一幀;檢查這個：http://daneden.me/animate/;所有的ROTATION效果都不起作用 – tom91136 2012-08-02 03:53:53

更新：似乎是在現在，Chrome固定23（見原題@joequincy評論）

事實上，這似乎是一個錯誤。直到它是固定的，你可以解決與jQuery的animate()功能是這樣的：

$(function() { 
    var rotation = 163; 
    $('body').on('click', function() { 
     rotation = (rotation == 163) ? 198 : 163;    
     $('#wheel').animate({ 
      borderSpacing: rotation 
     }, { 
      step: function(now, fx) { 
       $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');  
       $(this).css('-moz-transform', 'rotate(' + now + 'deg)');  
       $(this).css('-ms-transform', 'rotate(' + now + 'deg)');  
       $(this).css('-o-transform', 'rotate(' + now + 'deg)');  
       $(this).css('transform', 'rotate(' + now + 'deg)');  
      } 
     });   
    }); 
});

取出transition CSS語句，並添加：

border-spacing: 163px;

這個例子誤用border-spacing屬性，因爲它贏得了」 t在大多數情況下會影響您的佈局。

見http://jsfiddle.net/hongaar/wLTLK/1/

（感謝這樣的回答：Animate element transform rotate）

注：您可以選擇使用jQuery的轉換插件去除難看多css()電話和爲animate()語法的簡化版本（但增加開銷）。請參閱https://github.com/louisremi/jquery.transform.js

來源

2012-11-05 14:11:14

@Christian Varga - 仍然不是你的錯，但現在你可以做些什麼！:) – 2012-11-05 14:31:16

感謝您的詳細解答，也可以確認最新的Chrome修復了它。所以現在我們有兩種方法來解決這個問題:) – 2012-11-12 12:03:32

Chrome 21縮放元素在旋轉過程中

回答

相關問題