CSS変換規模を適切に

Question

これは、あなたが以下のgifで見ることができるように、それがうまく働いている私のコード

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

で働いていません。 しかし、次の順番は です。すべてのパイがnavメニュー（小さなもの）になるのは初めてですが、 パスカーブは、それ以降はパスカーブがありません。ここjsfiddleである：ここhttps://jsfiddle.net/q3jytbkr/

は、Aが長く

Answer 1

を見てサンプル

ある問題は、あなたがtransform-origin含めすべてのプロパティを、移行されています。あなたは、スケールを変更する開始する前に

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

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

また

---

に

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

からあなたのCSSを変更して、あなただけのinitialにtransform-originを設定することができます。