javascript - 转换原点更改延迟

我有一个问题，浏览器不知道对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/

最佳答案

我解决了这个问题。

诀窍是，我将过渡应用于元素上的所有转换。
因此，变换原点的变化也过渡了1s，这可以解释动画的变化。

所以改变

transition:all 1s;

至

transition:transform 1s;

做到了。

对于其他遇到此问题的人-仅将转换应用于所需的那些转换属性。