我目前正在使用DeviceOrientation插件在PhoneGap项目中以HTML和CSS构建指南针应用程序，以获取指南针标题。
我创建了一个 jsbin 来模拟标题更改。
我遇到的问题是，当值频繁更改（每 200 毫秒）时，CSS 过渡会卡顿很多。
您可以通过转到我上面链接的 jsbin 并缓慢拖动滑块以增加或减少旋转度来查看此问题的实际效果，尤其是当您缓慢来回拖动滑块时。
这让我相信这不仅仅是性能或帧速率问题;它很可能是由中断过渡的快速值更改引起的。
请注意，在实际的PhoneGap应用程序中，指南针值每200毫秒（或其他任意间隔）刷新一次，而不是您在jsbin模拟中看到的不一致的更新间隔。
我试着稍微玩一下过渡持续时间，但没有一个奏效。这是我尝试过的：
- 尝试使转换持续时间比值更改间隔短 0.5 毫秒。 例如，每 500 毫秒获取新值，将转换持续时间设置为 450 毫秒。不仅让我口吃，而且使整个过渡明显缺乏。
- 试图使过渡持续时间比更新间隔长（出于绝望），惊讶于它有效......过了一会儿，然后又开始让我结结巴巴。
- 尝试使转换持续时间与更新间隔相同，相同的卡顿。
现在我的问题是：当旋转值频繁变化时，我应该如何使 CSS3 过渡平滑而不会卡顿？此外，切换到 JavaScript 动画是否会缓解此问题，例如在值更改时暂停过渡？
溶液：
将 CSS3 过渡替换为 Javascript 动画。我使用了速度.js作为动画。每次指南针标题值更改时，我首先通过执行Velocity(compass_element, "finish")来完成上一个动画，然后对该元素的rotateZ进行动画处理。
在 CodeMentor 上看到了你的帖子。问题是，每次值更改时，它都会停止当前正在发生的转换，并开始另一个相同（长）持续时间的转换。如果这是快速连续完成的，它看起来并没有做太多事情，因为它试图不断放松并且永远不会进入过渡，从而导致口吃。
相反，您需要根据要行驶的距离进行过渡，而不仅仅是像您目前这样的时间。有很多方法可以做到这一点，有几个如下：
- 每次值更改时，计算指针需要移动的距离，并根据一些速度和缓动输入为其创建过渡。
- 每次值更改时以对数方式接近新目标。这意味着每 n 秒你就会朝着目标移动大约 1/k（只要距离至少是一个像素），其中 k 是一些常数，比如 2。因此，如果您每 0.05 秒将元素转换一半，它将相当快地接近目标。使用这种方法的困难部分是获得一个看起来不错的入门轻松，我不确定它是如何工作的，它可能需要一些尝试。
另一种选择（我个人可能会这样做）是使过渡持续时间更短，例如 0.1s 在拖动时似乎效果很好。您可以将 dragstart 上的过渡持续时间更改为此较短的值，然后在拖动停止时将其切换回去，从而为单击留下更长的过渡持续时间。