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

Question

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

抱歉，如果这还不清楚，但是描述起来有点困难。

请在此处查看问题（请在您的 iOS 或 Android 设备上查看）。< /a>

要重现，

• 触摸项目 3

• 向左滑动，刚好使项目 1 离开屏幕（不要将手指从屏幕上移开。您应该看到项目 2、项目 3、项目 4、项目 5 和项目 6 中的一些项目。

• 将手指从屏幕上移开（您​​将看到项目“跳跃”。项目 3 现在位于项目 2 所在的位置，项目 4 位于项目 2 所在的位置） 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 设备中查看）