jQuery/CSS 动画 - 原始状态在过渡状态上闪烁

Question

我的动画在完成时出现闪烁问题。我混合使用 jQuery 和 CSS 来滑动 div，我的问题似乎对我来说很独特。确切的问题包括使用 $("element").css("transform","translate(-50%,0px)"); 向左和向右滑动 200% 宽度的 div 50%；在 jQuery 和 transition:all 0.43s ease-in-out; 在 CSS 中(所有适当的浏览器前缀都根据需要迭代)。

动画在完成点之前完美地发生，然后瞬间闪烁原始状态，然后返回到过渡状态。除了原始状态而不是过渡状态的闪烁约 0.001 秒外，该代码完全按计划工作。

一个特别奇怪的副作用是我在两种状态下都有(自定义 JS，不是实际的)下拉菜单，jQuery 在滑动动画发生之前关闭，但是当闪烁发生时，它显示下拉菜单仍然展开。向后滑动时，下拉菜单应该关闭。这些以前可以完美地协同工作，今天我没有接触任何一段代码。

字面意思就是把动画前的页面状态截图，做我想让它做的事，然后闪现前状态的截图来故意 mock 我。

不幸的是，我无法发布 JSfiddle，因为我无法单独重现该问题，而且我很确定我的雇主不希望我在此处发布整个代码。对不起，我不能提供更多。感谢您提供的任何帮助。

(To any wondering, I've looked at quite a few other examples where overflow:hidden on the parent element will stop certain animations from flickering and jumping to their final positions without animating the last bit. But that's not what's happening here. I have had that problem before myself, and this is not it).

**更新: 进一步检查，这个问题只发生在 Chrome 中，而不是在 Safari 或 Firefox 中。我今天将 Chrome 更新到 18.0.1025.142，这可能是问题所在。

Answer 1

我的一个问题的解决方案与浏览器提供的无样式表单对象的渐变有关，该渐变传播到页面的整个宽度和高度(即使在比其他元素更低的 z-index 上，它们隐藏在后面) ) 由于我的 JavaScript 中出现“未找到变量”错误。一旦我在使用 jQuery 调用它之前定义了 Javascript 变量，奇怪的渐变就消失了。我只能将奇怪的行为归结为基于无法找到所需变量的不正确解析。尽管它看起来完全无关，但它是正确的解决方案。