Chrome：仅在某些过渡效果期间出现奇怪的滚动条

Question

我正在使用 jquery 在我的全屏背景图像上应用以下效果：

function moveDown(){
    $('body').find('img').delay($delay*1000).animate({top: "+="+$distance}, $seconds*1000,'swing')
}
function zoomOut(){
    $('body').find('img').css({"transition":"all 6s linear","transform":"scale(1)"});
}
function zoomIn(){
    $('body').find('img').delay($delay*1000).animate(obj,6500,'linear');
}

这很好用，但只有在使用第二个函数 zoomOut() 时我才在 Chrome 中遇到问题。在执行转换时，我在正常滚动条旁边看到一个奇怪的滚动条，这个滚动条仅在转换进行时出现。正如你在这张图片上看到的那样

过渡后它又消失了，过渡期间又出现了？？

有人对如何摆脱第二个滚动条有任何想法吗？

Answer 1

一开始我会怀疑两件事。

您正在为 moveDown 和 zoomIn 使用基于 javascript 的动画，然后在 zoomOut 上设置 CSS 动画值。尽量与您的动画保持一致，并尽可能使用 CSS 动画，因为与 javascript 动画相比，它们的性能更好（使用硬件加速等）。

当您设置该 CSS 过渡值时，当您的另一个动画触发时，它不会被“取消应用”，这意味着在 moveDown 或 zoomIn 中完成的每个增量更改都会应用六秒的过渡。

如果您想要快速而肮脏的修复，您可以将以下块放入 zoomIn 和 moveDown：

$('body img').css({'transition':'none', 'transform':'none'});

但理想情况下，您应该将所有这些 CSS 转换封装在一个类中，然后通过 JavaScript 应用该类。

只有我的 2 美分