CSS преобразования масштаба не работает должным образом

Question

Это мой код

// 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"); 
} 

Как вы можете видеть на рисунке GIF, это работает отлично. Но поворот: Каждый первый момент пирога - это навигационное меню (маленькое), переходные кривые перехода , после этого переход не будет иметь кривых пути. здесь jsfiddle: https://jsfiddle.net/q3jytbkr/

здесь образец

больше смотреть

Answer 1

Проблемы в том, вы переводите всех свойства, в том числе transform-origin. Изменение CSS от

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

в

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

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

---

В качестве альтернативы, вы можете просто установить transform-origin к initial, прежде чем приступить к изменению масштаба.