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/ 这里是示例 更长的观察

- Wreigh

---

你能提供一个现场示例来重现这个问题吗？ - Andrew Li

好的，等一下，我会创建一个。 - Wreigh

这是链接：https://jsfiddle.net/q3jytbkr/ - Wreigh

请提供一个例子，您想要什么？ - Razia sultana

第一次缩放圆形时的过渡显示出路径的弯曲。 - Wreigh

Answer 1

问题在于你正在转换所有属性，包括transform-origin。请修改你的CSS代码：

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

to

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

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

---

或者，您可以在开始更改比例之前将transform-origin设置为initial。

- Phil

---

@WreighChristianSantos 不客气。设计很棒。 - Phil