Wreigh Christian Santos Wreigh Christian Santos - 2 months ago 12
CSS Question

CSS transform-scale not working properly

This is my code

// turn a pie into a nav menu (make it smaller)
// this is triggered when a pie should be turned into a nav
function beNavPie(pie) {
$(pie).css("transform", "scale(0.3)");
$(pie).css("transform-origin", "initial");
}
// turn a nav menu into a pie (revert it to original size)
// this is triggered when the nav is clicked
function pieFromNav(nav) {
$(nav).css("transform", "scale(1)");
$(nav).css("transform-origin", "initial");
}


As you can see in the gif below, it's working fine.
But the turn is:
Every pie's first time to be a nav menu(a small one), the transition
path curves, after that, it's transition will not already have path curves. here is jsfiddle: https://jsfiddle.net/q3jytbkr/

here is sample

enter image description here

A longer look

enter image description here

Answer

Problem is you are transitioning all properties, including transform-origin. Change your CSS from

.show-pie {
    visibility: visible;
    transition: .3s;
}

to

.show-pie {
    visibility: visible;
    transition: transform .3s;
}

https://jsfiddle.net/q3jytbkr/1/


Alternatively, you could just set the transform-origin to initial before you start changing the scale.