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。