Html css动画中的反变换

在一些界面中，我想做动画。因为transform属性比其他CSS属性优化得多，所以我将使用它

使用transform:scale（）：当元素纵横比不变时，没有问题。当比率发生变化时，我找到的解决方案是放置一个容器，在这个容器中放置一个内部容器。然后将反向变换应用于内部块，以便在动画期间和之后比率看起来保持不变

我做了一支笔来测试这个想法，它工作了，但是在动画中出现了一个问题：内部块在动画中看起来被拉伸了。我不明白为什么动画时间是一样的，而放松是线性的

（在菜单上单击以切换动画）

document.querySelector（“#菜单”）.addEventListener（'click'，function（）{
this.classList.toggle（'collapsedd'）
});
#菜单{
利润率：30像素；
填充：15px；
背景：白色；
宽度：150px；
溢出：隐藏；
变换原点：顶部中心；
过渡：变换。5s线性；
}
#菜单{
变换：scaleY（.2）；
}
#菜单，内部{
过渡：变换。5s线性；
变换原点：顶部中心；
}
#menu.collapsedd.inner{
变换：scaleY（5）；
}
#菜单，内部ul{
填充：0；
保证金：0；
列表样式：无；
}

菜单

链接1
链接2
链接3
链接4

我想这是因为这句话：

#menu.collapsedd .inner {
  transform: scaleY(5);
}

添加collapsedd时，您正在将内容的Y缩放为5，尝试将该值更改为1，或者只是不在内部分区上进行缩放。您可以使用不透明度或其他方法将其淡出？
发生这种情况的原因是，在进行转换时，计数器变换不相同。考虑您的示例，容器将从
scaleY（0.2）
到
scaleY（1）
，而子容器将从
scaleY（5）
到
scaleY（1）

在转换结束和开始时，这将起作用，因为容器和子转换将“取消”：


起始值：0.2*5=1
结束：1*1=1

但过渡的中间步骤并非如此。例如，当转换为50%完成时：

容器刻度：0.2+（1-0.2）*0.5=0.6
儿童比例：5+（1-5）*0.5=3
容器比例*子比例：0.6*3=1.8

检查下图以了解该比例的变化情况：


紫色线表示转换期间子级的scaleY，蓝色线表示容器的scaleY，深黄色线表示容器scaleY*子级scaleY

因此，为了在转换期间真正取消容器转换，需要使用一个easing函数，该函数为整个转换保存表达式
container scale*child scale=1
。这不是一件容易的事。
这个菜单就是一个简单的例子。我并不是想具体解决这个问题，而是想通过逆变换来保持比率。我缩放内部5倍，因为容器被缩放为1/5。我知道，我不是100%确定总体目标是什么，但是注释出内部div上的变换使所有内容都可以一起缩放，但是在动画结束时，你只是挤压了外观文本<代码>/*#menu.collapsedd.inner{transform:scaleY（5）；}*/

清晰详细的解释。那么，你有什么建议可以用更简单的方式来实现这一点吗？