转换原点更改延迟

Question

I have a problem where browser is not aware of transform-origin change to dom element or better say it is aware but with delay.

I have a placeholder which i want to scale in on click. I have this piece of code where i calculate clicked element center and apply transform origin to transformed element.

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

What happens is that browser starts to scale to transform-origin: 50% 50% and in the middle of animation it shifts to correct transform-origin position.

If i apply scale 500 milliseconds after applied transform-origin the animation works.

This code works smoothly:

$(".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)

Here is the fiddle so you can see what is going on: https://jsfiddle.net/r9xboa1b/

Click on the red squares - see the shift during transition? You can only click once and then run fiddle again.

If you apply scale in timeout the shift is gone.

EDIT

What i actually want to achieve is smooth transition to the center of the each square without shifting and without timeout. https://jsfiddle.net/r9xboa1b/

Answer 1

I resolved the issue.

The trick was, that i applied transition to all transformations on element. Therefore the change in transform-origin was also transitioning 1s - and that explains the shift in animation.

So changing the

transition:all 1s;

to

transition:transform 1s;

did the trick.

For others that come to this problem - apply transition to only those transform properties you need.