Javascript/CSS3 过渡问题答案

【问题标题】：Javascript / CSS3 transition problemsJavascript/CSS3 过渡问题
【发布时间】：2012-03-21 08:12:02
【问题描述】：

我有一个页面之间有 ajax 链接，但我在转换时遇到了一些问题。我在jsfiddle上搭建了一个demo页面进行演示。

问题是，当内容改变高度时，div 最终会出现在错误的位置并导致不平滑的过渡。我尝试了几件事来尝试解决这个问题。我目前的解决方案是从 div 中删除 animate 属性，然后移动它，但这并不总是有效。在我的代码中，我评论了延迟以演示该问题。即使有 50 毫秒的延迟，它也无法正常工作（我认为这是由于浏览器滞后，因为它几乎从未在这个 jsfiddle 上发生过），所以我正在寻找更优雅的解决方案，不会导致过渡时间更长.

我使用 css3 过渡而不是 jquery，因为它们往往更平滑。

【问题讨论】：

它在 jsfiddle 上的代码中运行良好。你说的是哪个浏览器？
我使用的是 firefox 11，我在 Google Chrome 上遇到了同样的问题。问题是，如果我使用太短的延迟，过渡会跳跃。如果我使用适度的延迟，那么它在 90% 的时间里都能正常工作，而在速度较慢的计算机上则不那么频繁，如果它太长，那么过渡就会被令人讨厌地延迟。
我认为问题在于包含您的代码的包装器 div。它适用于小提琴，因为它只包含 动作代码 而不是它的包装 div。尝试增加父/祖父母 div 的默认高度并查看。

标签： javascript jquery html css

【解决方案1】：

我认为问题在于 css 转换。看看这个：

http://jsfiddle.net/UVr4A/2/

【讨论】：

【解决方案2】：

好吧，事实证明问题与我的想法无关。部分原因是我过度简化了我的问题并最终解决了问题。

在我的长页面上，有些图像最终会在过渡过程中加载，这就是导致跳跃的原因。我通过加载事件和超时解决了这个问题。

【讨论】：