文章/答案/技术大牛

发布

社区首页 >问答首页 >除非放大，否则Chrome中的CSS动画会断断续续

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

Stack Overflow用户

提问于 2014-10-02 21:14:37

回答 1查看 533关注 0票数 0

我正在做一个网站项目，其中包含多个元素动画与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%的图片(取决于纵横比)。

jquery

css

google-chrome

animation

回答 1

Stack Overflow用户

发布于 2014-10-03 00:51:02

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

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26161688

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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