Question

我试图通过使用translate3d（100％，0,0）以1s过渡移动它来设置（100％宽度）div屏幕外的动画。我相信动画应该完全卸载到GPU而不受JS的影响，但是当我进行JS计算时它很冷。

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

这是我使用的代码：

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);
});

非常感谢任何想法或建议！

translate3d，转换未加速（被JS阻止）

0 个答案: