1

我正在尝试通过使用带有 1s 过渡的 translate3d(100%,0,0) 移动一个（100% 宽度）div 来在屏幕外设置动画。我相信动画应该完全卸载到 GPU 上并且不受 JS 的影响，但是当我进行 JS 计算时它会冻结。

请注意，当我使用像素值时它不会冻结，例如 translate3d(500px,0,0)

看到这个效果：http: //jsfiddle.net/khufzte9/

这是我正在使用的代码：

CSS：

html, body {
    margin: 0;
    padding: 0;
}
#blue {
    background-color: blue;
    width: 100%;
    height: 100%;
    -webkit-transition: all 1s;
}

HTML：

<div id='blue'></div>

JS：

document.body.addEventListener('click', function () {
    var blue = document.querySelector('#blue');

    blue.style.transform = 'translate3d(100%,0,0)';
    // Do some blocking work after the animation starts
    setTimeout(function () {
        for (var i = 0; i < 1000000000; i++) {
            var j = 5/3;
        }
    }, 300);
});

任何想法或建议将不胜感激！

4

0 回答 0