轉換原點更改延遲

我有一個問題，瀏覽器不知道dom元素的轉換源更改，或者更好地說它知道但延遲。轉換原點更改延遲

我有一個佔位符，我想在點擊進行縮放。我有這段代碼，我計算點擊元素中心，並將轉換原點應用到轉換後的元素。

$(".place-holder") 
     .css({ 
      "-webkit-transform-origin":transCenterY+"px "+transCenterX+"px", 
      "transform-origin":transCenterY+"px "+transCenterX+"px", 
      "transform":"scale(2)" 
     });

會發生什麼事是，瀏覽器開始擴展到變換原點：50％，50％和動畫進行到一半時移動以糾正變換原點位置。

如果我在應用轉換原點後應用500毫秒的縮放比例，動畫將起作用。

此代碼工作順利：

$(".place-holder") 
     .css({ 
      "-webkit-transform-origin":transCenterY+"px "+transCenterX+"px", 
      "transform-origin":transCenterY+"px "+transCenterX+"px" 
     }); 

    setTimeout(function(){ 
     $(".place-holder").css("transform","scale(2)"); 
    }, 500)

這裏是小提琴，所以你可以看到正在發生的事情： https://jsfiddle.net/r9xboa1b/

點擊紅色方塊 - 見過渡期間的轉變？您只能點擊一次，然後再次運行小提琴。

如果您在超時時應用比例，則換檔不再。

EDIT

我實際上想實現平滑過渡到每個正方形的中心不轉移並不會發生超時。 https://jsfiddle.net/r9xboa1b/

來源

2015-12-08 Leonajs

您是否在尋找類似[this？]（https://jsfiddle.net/r9xboa1b/1/） –

不，轉換原點（縮放中心）應該位於點擊方格的中心。此外，我想保持快速過渡，例如。 1秒。 Aslo看到我的編輯解釋。 – Leonajs

我解決了這個問題。

訣竅是，我將轉換應用於元素的所有轉換。因此，變換原點的變化也是1s--這就解釋了動畫的變化。

因此改變

transition:all 1s;

到

transition:transform 1s;

的伎倆。

對於出現此問題的其他人 - 僅將轉換應用於您需要的轉換屬性。

來源

2015-12-09 16:46:17 Leonajs

轉換原點更改延遲

回答

相關問題