javascript - 轮播 - 元素位置在 touchend 上发生视觉变化

Question

我正在尝试为移动游猎构建一个触摸/滑动轮播。到目前为止，一切都很好，但是当我尝试在元素被滑动后设置元素的左侧位置时，我遇到了一个问题。 CSS 中的左侧位置设置正确，但显示不正确。

很抱歉，如果这不清楚，但它有点难以描述。

Please see the problem here (please view on your iOS or Android device).

要重现，

• 触摸项目 3

• 向左滑动，刚好足以使项目 1 离开屏幕(不要将手指从屏幕上移开。您应该看到项目 2、项目 3、项目 4、项目 5 以及项目的一些内容) 6.

• 将手指从屏幕上移开(您​​将看到项目“跳跃”。项目 3 现在位于项目 2 所在位置，项目 4 位于项目 3 所在位置，依此类推)

• 现在，尝试再次向左滑动。您将再次“跳跃”项目。第 2 项回到了它应该在的位置。

基本上，我所做的就是根据滑动距离翻译项目。在触摸端，我将元素的位置设置为翻译后的位置。这就是它的突破点。

我的所有代码都在上面的网址中。

任何帮助将不胜感激。

谢谢!

Answer 1

明白了!

所以我的问题不是重置转换。我添加了这一行:

items[i].style.webkitTransform = "translate3d(0px, 0px, 0px)";

到我的 updatePosition 函数，一切都很好!

  function updatePosition(){
    for(var i=0; i<items.length; i++){
      var translatedLeft = getTranslatedPosition(items[i]).left;
      items[i].style.left = translatedLeft + "px";
      items[i].style.webkitTransform = "translate3d(0px, 0px, 0px)";
    }
  }

这里的工作演示:http://dl.dropbox.com/u/10250170/dev/carousel/touch_test.html (在 iPhone 模拟器或您的 iOS 或 Android 设备中查看)