动画在 FF 中有效，但在 chrome 中效果不佳

Posted 2023-03-06

【中文标题】动画在 FF 中有效，但在 chrome 中效果不佳

【英文标题】：Animation works in FF but bad effect in chrome

【发布时间】：2014-01-15 04:09:08

【问题描述】：

我有一个隐藏在主要内容右侧的“绝对定位”部分。选择菜单后，我将此部分设置为左侧的动画

mysection.stop().animate(
    left:'200px'
,2000,'easeOutBounce',function()
    menuobj.css(
        borderLeft:'1px solid green',
        borderTop:'1px solid green',
        borderRight:'1px solid green',
        height:'-=1',
        width:'-=2'
    );
);

动画后，我为菜单添加边框。 在我在该部分添加弹性滑块之前，这非常有效。在该部分中添加 jQuery flex 滑块后，我在 chrome 中得到了奇怪的动画。但在 Firefox 中运行良好。以下是chrome效果的截图。

在上面的图片中，我所说的部分是灰色背景的。 为什么会发生这种情况？ webkit 有什么特定的 hack 吗？

编辑

我在一台高性能（已插入显卡）的电脑上对其进行了测试，它运行良好：o 那么，它依赖于系统吗？我完全糊涂了。

【问题讨论】：

它在某处在线吗？

最好有一个 jsfiddle/plunkr 以重现这个问题。

如果无法重现此问题（jsfiddle、在线版本等），我猜没有人可以帮助您。

@MarkusKottländer：好的。我会做到并在这里通知。之后请帮助我。

@MarkusKottländer：我是在网上制作的。请检查一下

【参考方案1】：

我对您的 custom.js 进行了一些更改，这些更改应用了解决方法。不是真正的解决方案，但看起来比目前更好。它在动画开始时隐藏 flexgallery，并在动画结束时将其淡入。

custom.js

43: $('#nav li').click(function() 
44:     $('#ProjContent').hide(); // added
45:         var menuitem=$(this);

和

168: $('#ProjContent').hide(); // added
169:     maincontent.animate(top:0,2000,'easeOutBounce',function()
170:         $('#ProjContent').fadeIn(250); // added

【讨论】：

非常感谢。如果您找到更好的解决方案，请通知我（不隐藏 n 显示）。

【参考方案2】：

首先，如果禁用 flex 滑块，动画在 Chrome 中是否正常工作？

如果在移动区域内没有 flex 滑块的情况下它确实可以正常工作，请尝试等待动画完成，然后再将 flex 滑块加载到位。不确定这对您是否可行，因为我们还没有实时测试版本可供使用。不过，我想这是可能的。

如果它有效，您之后可能还必须禁用 flex 滑块（当您希望动画区域消失时）。在动画区域内放置一个缩略图应该可以让您在制作动画时保持它被滑块“填充”的外观。如果正确执行，用户永远不会知道滑块只是在动画完成后才真正出现。

【讨论】：

感谢您的建议。我按照你在第二段中说的做了。但不知道如何实现第 3 段中的内容。 如何禁用 flex 滑块？ 和 “在动画区域内放置缩略图”，如何禁用？

要制作缩略图，只需在 flex 滑块看起来正确时截取它（例如在 Firefox 中）。然后裁剪掉所有周围区域，只留下弹性滑块的图像。将其保存为图像并在动画期间将图像放置在动画面板中。然后写一些 jQuery 来hide() 动画完成时的图像，show() 那个时候的 flex 滑块。

禁用弹性滑块可以通过多种方式完成，但最合适的方式将取决于您首先使其显示的准确程度。在我的脑海中，一个想法是创建一个函数 - 例如 loadSlider() - 并让该函数为滑块加载所有必要的脚本、图像等，并将完整的滑块应用程序放入预定的 html元素。当动画处于活动状态时，相同的元素将包含缩略图，并在动画完成时从 loadSlider() 加载弹性滑块。

另一个想法是像现在一样加载滑块，但只是在动画开始之前hide()它，在滑块隐藏之后show()缩略图。然后执行动画。完成后，将过程反转为show() 滑块和hide() 缩略图。我还要补充一点，缩略图可能根本不需要，我只是认为它会在动画处理时创造一种连续感。您也可以在动画期间简单地 hide() 滑块和完成时 fadeIn()。

非常感谢。如果您找到更好的解决方案，请通知我（不隐藏 n 显示）。