我有一个非常类似于图像滑块的容器，设计用于水平触摸/鼠标拖动以在幻灯片之间移动。为了美观，应用了一个放松功能，以便它在释放时滑动到每个幻灯片的中心位置。移动的方法是"transform: translateX()"
我目前遇到的问题是，如果用户释放，然后触摸并再次移动它，而它已经在运动中，它将在它的过渡结束时跳转到幻灯片。例如:如果你在幻灯片1上，当它在幻灯片2的区域时移动它并释放它，然后在它还在运动时再尝试移动，它会立即跳到幻灯片2，然后从那里移动到我移动手指的地方。
我本质上寻找的是一种在翻译动画运行时获得中间过渡距离的方法。有什么方法可以测量元素在过渡过程中的实际位置吗?如果不是，有什么解决方案吗?
编辑:我找到了问题的根本原因，尽管这并没有改变问题的焦点。为了对正在发生的事情给出一个更广泛的解释，我将在这里包括它。
默认的转换持续时间设置为300ms。当用户通过鼠标或触摸拖动内容时，这个时间设置为0毫秒，这样它就不会滞后于用户的移动。当释放时，它将被设置为300ms。如果它在运动中再次被抓取，它将在持续时间设置为0毫秒时，采取它正在过渡的位置并在那里捕获。这比允许它在再次拖动时继续在那里流动要好，因为内容会在拖动点下面滑动。
根据对问题帖子的评论，我认为这意味着我的第一个问题的答案是:不，你不能在翻译过程中直接获得中间值。
关于第二个问题，评论提到了在动画完成之前阻止活动的选项。虽然这是可行的，但我觉得它也会降低用户体验，所以我决定尝试一些不同的东西。我的解决方案似乎很好地解决了这个问题，所以我决定回答我自己的问题，并在这里发布给其他人。我还编辑了一些更详细的问题。
我最终做的是使用一个计时器来预测中间值的位置，这样如果被打断，它就会在正确的位置无缝地停止转换。
这样做需要一点数学运算，精确的公式取决于所使用的缓和类型。"线性"缓动是最容易预测的，但其他缓动是可以用一点三角学来实现的。我使用了"ease-out"，所以我将在下面的伪代码中包含我的解决方案:
startX + (finishX - startX) * sin((now - startTime) / transitionDuration * PI / 2)
-
startX为滑块释放时的位置(过渡开始)。 -
finishX是滑块移动的位置(过渡结束)。 -
now为当前时间，单位为毫秒。 -
startTime是滑块在释放时的时间(过渡开始)。 -
transitionDuration是转换完成所需的时间，单位为毫秒。