旋转木马-触控端元素位置的视觉变化

Question

我正在尝试为移动狩猎建立一个触摸/滑动旋转木马。到目前为止，还不错，但是当我尝试在元素被滑动后设置它们的左边位置时，我遇到了一个问题。左边的位置在CSS中被正确设置，但是它们的显示不正确。

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

请在这里看到问题(请查看您的iOS或安卓设备)。

为了繁衍，

• 触摸项目3
• 向左滑动，这样第1项就离开了屏幕(不要把手指从屏幕上抬起)。你应该看到项目2、项目3、项目4、项目5和一些项目6。
• 把你的手指从屏幕上拿开(你会看到物品“跳跃”)。第3项现在是第2项，第4项是第3项，等等)
• 现在，尝试再次向左滑动。你将再次“跳跃”这些物品。第二项又回到了原来的位置。

基本上，我所做的是根据滑动距离翻译项目。在触摸结束时，我将元素的位置设置为翻译的位置。那就是它断裂的地方。

我所有的代码都在上面的url里。

任何帮助都将不胜感激。

谢谢!

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)";
    }
  }

这里的工作演示：test.html (在iPhone模拟器或您的iOS或安卓设备中查看)