我的动画在完成时出现闪烁问题。我使用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中出现"找不到变量"错误,浏览器在未设置样式的表单对象上提供渐变,这些渐变传播到页面的全宽和全高(即使在比隐藏在后面的其他元素更低的z索引上)。在用jQuery调用Javascript变量之前,我定义了它之后,奇怪的梯度就消失了。我只能把这种奇怪的行为归因于基于找不到它想要的变量的不正确解析。尽管这看起来完全无关,但这是正确的解决方案。