Question

我正在开发一个网站项目，其中包含使用CSS（有时是jQuery）动画的多个元素。但是，对于包含大型视觉效果的元素，动画通常会滞后并且看起来不太好。例如，淡入/淡出大图像或重新调整包含Google地图的div的大小。包含文本或其他内容的更简单元素可以正常工作。

但是，当我将页面缩放到除100％以外的任何内容（进出）时，动画看起来非常流畅。如果我然后回到100％，动画有时看起来很平滑，有时会再次开始滞后。

在其他浏览器中（在IE和FF中测试），动画在任何缩放级别都可以正常显示，包括100％。

这只是一个我必须接受的Chrome错误/问题，还是我可以做些什么来改进它？请记住，大型图像是动画的绝对必要。

编辑，代码示例：

JS：

function pictureOverlay(url)
{
    var body = $('body');
    var overlay = $('<div class="overlay"></div>');
    body.append(overlay);
    overlay.append('<img class="picture-overlay" src="' + url + '"></img>');
    overlay.hide().fadeIn(400);
    overlay.on('click', function() {
        $(this).fadeOut(400, function() {
            $(this).remove();
        });
    });
}

CSS：

.overlay {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 200;
    vertical-align: middle;

    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.75);
}
.picture-overlay {
    position: absolute;
    display: block;
    max-height: 90%;
    max-width: 90%;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);

    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.75);
}

这会显示一个黑色透明背景的图片叠加层，它会填满整个屏幕并淡入/淡出。叠加层包含的图片大小调整为适合屏幕宽度或高度的90％（取决于宽高比）。

Answer 1

这可能无法解决您的具体错误，但另一种可能有用的方法是利用高性能CSS动画来执行GPU与CPU之间的动画。更具体地说，基于javascript的动画被发现性能较差，因为你被绑定到JS的单个计算线程并且缺乏对GPU的访问。幸运的是，CSS可以提供帮助。

我强烈建议您查看this article on high performance browser animations，并可能将动画代码移动到使用CSS。只需将包含动画的CSS类添加到受影响的节点即可实现所需的相同效果。

当CSS动画完成by utilizing the "transitionend" event时，你也可以执行一些JS逻辑。

除非放大，否则Chrome中的CSS动画会断断续续

1 个答案: