我的部分应用要求用户能够使用鼠标滚轮放大已在较大容器元素内居中的图像。
我正在使用jQueryUI提供一个滑块，手动控制缩放。
使用鼠标滚轮进行缩放时，视口会进行调整，以便用户始终缩放到鼠标光标，从而在缩放功能方面提供与谷歌地图完全相同的行为。
另外，为了提供比使用css过渡更好的体验，我编写了一个基于动量的平滑滚动算法，使变焦尽可能平滑。
除了一个例外，一切都很完美。
要复制问题，请在提供的jsFiddle上执行以下步骤：
您将看到缩小的图像现在放错位置（因为翻译尚未删除）。
我想要的行为是缩小图像在缩放设置回1后返回原始位置。
如果从Firebug中的图像中删除css translate，您会看到图像返回到正确的位置。
因此可以通过简单的条件轻松实现这一点：
if(scale == 1){
//remove transforms completely
}
然而，这样做会提供一种跳跃的体验，我希望图像在用户缩小时逐渐缩小回原始位置。
值得一提的是，如果在不移动鼠标的情况下完全放大，则在缩小时会发现一切都正确。这很简单，因为没有translate添加到元素转换中，只需scale和transform-origin。在我的代码中，只有在使用鼠标中间缩放更改缩放位置时才会添加translate。
不幸的是，我似乎无法理解最好的解决方法。
这是一个有效的jsFiddle：
提前感谢您的帮助。
注意：我很清楚我的小提琴中有一些冗余的代码，并不是特别优雅，但这只是一个快速的模拟，以帮助您理解问题。