轉換原點更改延遲

Question

我有一個問題，瀏覽器不知道對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/

單擊紅色方塊-看到過渡期間的轉變了嗎？ 您只能單擊一次，然后再次運行小提琴。

如果在超時中應用刻度，則移位將消失。

編輯

我真正想要實現的是平滑過渡到每個正方形的中心，而不會發生移位且沒有超時。 https://jsfiddle.net/r9xboa1b/

Answer 1

我解決了這個問題。

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

所以改變

transition:all 1s;

至

transition:transform 1s;

做到了。

對於其他遇到此問題的人-僅將轉換應用於所需的那些轉換屬性。