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