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

时间:2012-04-02 21:05:36

标签: jquery css google-chrome css-transitions flicker

我的动画在完成时闪烁有问题。我正在使用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,这可能是问题所在。

1 个答案:

答案 0 :(得分:0)

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