【发布时间】：2012-04-16 13:11:04
【问题描述】：
我的动画在完成后闪烁时出现问题。我混合使用 jQuery 和 CSS 来滑动 div，我的问题对我来说似乎是独一无二的。确切的问题包括将 200% 宽度的 div 向左和向右滑动 50%，在 jQuery 中使用 $("element").css("transform","translate(-50%,0px)"); 并在 CSS 中使用 transition:all 0.43s ease-in-out;（所有正确的浏览器前缀都将根据需要进行迭代）。
动画完美地进行，直到完成点，然后一瞬间它会闪烁原始状态，然后又回到过渡状态。除了原始状态闪烁而不是转换状态大约 0.001 秒外，该代码完全按计划工作。
一个特别奇怪的副作用是我在两种状态下都有（自定义 JS，不是实际的）下拉菜单，jQuery 在滑动动画发生之前关闭了它，但是当闪烁发生时，它显示下拉菜单仍然展开。向后滑动时，下拉菜单应按原样关闭。这些以前完美地协同工作，而我今天没有接触过任何一段代码。
这简直就像是在截取动画之前的页面状态，做我想做的事，然后闪现之前状态的截图故意嘲讽我。
很遗憾，我无法发布 JSfiddle，因为我无法单独重现问题，而且我很确定我的雇主不希望我在此处发布整个代码。很抱歉我不能提供更多。感谢您提供的任何帮助。
（对于任何想知道的人，我已经看过很多其他示例，其中 父元素上的
overflow:hidden将停止某些动画 在没有动画的情况下从闪烁和跳跃到它们的最终位置 最后一点。但这不是这里发生的事情。我有过 摆在我面前的问题，这不是它）。
**更新： 经进一步检查，此问题仅出现在 Chrome 中，而不出现在 Safari 或 Firefox 中。我今天将 Chrome 更新到 18.0.1025.142，这可能是问题所在。
【问题讨论】：
-
没有代码，很难提供帮助。无论如何，Javascript 都是客户端，因此除非它是 Intranet，否则在此处发布它与查看源代码没有区别。您是否尝试过移除 CSS 缓动并尝试全部通过 jQuery 实现？
-
另一个更新： 今天在 Chrome 中发生了更多奇怪的事情，与 jQuery 和 CSS 动画有关，涉及显示错误，在转换时代码中不存在的渐变条开始出现触发，并在整个屏幕上显示。既有垂直条也有水平条。它不是 webkit，它是 Chrome 本身；在 Safari 中测试一切正常。与 Firefox 等一样。Chrome 似乎有一个动画错误，但我不知道如何摆脱它。谢谢，Alex，但不，切换到纯 jQuery 时没有区别。
-
哼。我能够以某种方式解决所有这些问题。它们都是与我想象的完全不同的解决方案。实际上，是的@Alex，我以为我已经完全切换到 jQuery，但事实证明我在页面上编辑了错误的过渡，我仍然看到 CSS 实现的问题。一旦我弄清楚这一点并将 problematic one 切换为仅 jQuery，它现在在 Chrome 中运行良好。所以我有点不知所措：我的 CSS 代码不正确吗？新版 Chrome 是否存在与 jQuery/Javascript/CSS 相关的错误？我还是不知道。
-
只是为了演示我自己会如何测试一些东西 - 你可以尝试将时间设置为 1 秒而不是 0.43 秒，并且在没有缓动的情况下也尝试一下。
-
谢谢亚历克斯。在这一点上，只要它完全有效，我就很高兴。 :)
标签： jquery css google-chrome css-transitions flicker