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 。