Jquery 同时转换top和translate会导致看起来不匹配的测量（但不是'；t）的未对齐

我有一些类似手风琴的元素，每个元素都包含一个不同纵横比的图像。我的目标是在元素关闭时让这些图像完全覆盖图像区域（绝对居中），当它们打开时，让整个图像都适合图像区域（la

对象适合：contain

），顶部对齐。图像应在这两种状态之间平滑过渡

为了能够在“居中”状态和“顶部对齐”状态之间设置动画，我必须使用绝对定位，使用旧的

top: 50%; 
left: 50%; 
transform: translate(-50%, -50%);

该技巧用于使图像居中

Flex适用于开始和结束状态，但不可能在

align items:center和
阿尔金项目：flex start
。
对象匹配也是如此：contain/
背景大小：包含；背景位置：顶部-开始和结束状态看起来与预期一致，但不可能在它们之间转换

现在，我已经实现了开始和结束状态，图像在它们之间进行了转换，但我正在体验一种奇怪的效果


我遇到的问题是，在

top: 50%; transform: translateY(-50%); //centered

及

比赛似乎没有排好队。无论出于何种原因，图像都会在过渡结束时以顶部对齐的方式固定下来，然后越过顶部对齐的目标。我以前见过这种情况，可能是时间函数不一样，所以一个属性的转换在另一个属性之前开始减速，使它们失步。但在这种情况下，两种度量值都是相同的（默认值）：
ease-in-out
。即使我尝试将它们都设置为
线性
，这将抵消任何“缓和失调”，问题仍然存在

代码笔：

有人知道这是什么原因吗？我是否应该转换其他属性以达到相同的效果？
可能是因为所涉及的距离/大小不相关。其中一个比另一个行程少，因此计时显示为“关闭”。可能是因为所涉及的距离/大小无关。其中一个行程比另一个少，因此计时显示为“关闭”。
top: 0; transform: translateY(0); //top-aligned