iPad CSS3 WebKitt变形和触摸事件-轻微的无法解释的口吃

这与图像库有关，因此当您“滑动”时，图像会从屏幕上加载和卸载，但中心图像始终平滑显示

它是从此处描述的swipeview库派生的代码：

问题在于，javascript在touch end事件中设置WebKittTransform与元素在屏幕上实际开始动画之间存在100-200ms的延迟

这种有问题的延迟只会断断续续地发生；似乎在卸载/加载约15-20张幻灯片后，这种情况就会持续发生

在触摸移动事件中，有如下代码：

element.style.webkitTransitionDuration = 0
element.style.webkitTransform = "translate3d( etc. ) "

element.style.webkitTransitionDuration = '<some_number>ms';
element.style.webkitTransform = "translate3d( etc. ) "

这个功能非常快，如果你在ipad上移动手指，这个元素就会精确地“瞬间”跟随你的手指

在触摸端事件中，有如下代码：

element.style.webkitTransitionDuration = 0
element.style.webkitTransform = "translate3d( etc. ) "

element.style.webkitTransitionDuration = '<some_number>ms';
element.style.webkitTransform = "translate3d( etc. ) "

element.style.WebKittTransitionDuration='ms'；
element.style.webkitttransform=“translate3d（等）”

---

触摸结束事件就是问题所在。触摸结束事件本身会在手指从ipad上取下时触发，但是，当问题发生时，css更新不会触发屏幕上的实际动画，直到出现上述问题延迟之后

这是一个棘手的问题。我终于找到了罪犯。在我的touchend事件侦听器中，我调用了一个向DOM元素添加类的函数。这导致Safari花了一些时间将纹理重新连接到GPU，导致口吃。删除那些直接的类名更新使它再次变得非常平滑（我仍然使用requestAnimationFrame，而不是CSS转换）

---

我将类名更改移动到一个单独的事件中，而该事件是由touchend触发的，并且没有引起任何性能问题。因此，如果必须设置类，请不要直接在touchend回调中设置。触发另一个事件，或者在requestAnimationFrame中设置类。

我正在处理同样的问题。奇怪的是，如果你测试最后一次touchmove事件和touchend事件之间的时间间隔，它总是在30毫秒左右。我正在使用更新动画装备上的X和Y的策略，然后在requestAnimationFrame中，我将该装备绑定到DOM元素。它在触摸移动时非常平滑，触摸结束后也非常平滑，但在两者之间会结巴。我试着像at一样重新编写代码，在那里它使用CSS进行转换，而不是请求动画帧，但它仍然有同样的问题。事实上，在我的iPhone 4上，它在最后一次touchmove事件和touchend事件之间仍然有点口吃，但它仍然在口吃中进行动画，而不是停留在同一点上。不过我的iPad 2上有点不对劲。这已经晚了，但我想我应该提到，在我的案例中，罪魁祸首非常相似——在touchEnd事件中，我向DOM元素添加了类。当你说“触发另一个事件”时，你的意思是你有两个touchEnd侦听器函数吗？或者在touchend回调中，您说$document.trigger（'someEvent'），并将类更改附加到它？如果你能澄清一下，我会很有帮助，因为我也有类似的问题。。。干杯最后我明白了。在我的touchend处理程序中，我触发了我编写的另一个事件，通过原始事件参数传递给这个处理程序。然后在新事件的处理程序中，我执行了所有touchend逻辑。这导致touchend上的延迟消失。魔术谢谢