javascript - CSS transition 不同的行为取决于浏览器类型

Question

在我的代码中，我根据当前鼠标的 X 和 Y 位置更改了一些元素的位置。我添加了一个 css transition: all 5000ms; 让动画更流畅。

在 Google Chrome(第 63 版)中它看起来很棒并且按预期工作，但在 Internet Explorer 和 Firefox 中动画看起来滞后/断断续续

这是我的代码:

// $('.shape').css("transition", "all 7000ms");
$(document).mousemove(function(e){
    let mX = e.clientX;
    let mY = e.clientY;
    $('.shape-1').css("transform", "translate("+mX/10+"px, "+mY/10+"px)");
});

有谁知道为什么浏览器对 css 转换的处理方式不同？

JSFiddle 没有 CSS 转换:https://jsfiddle.net/2rrcp27L/9/

JSFiddle 带 CSS 转换:https://jsfiddle.net/2rrcp27L/6/

Answer 1

发生这种情况的主要原因是 mouseMove触发了很多次，Chrome 可以处理它，但也许 Firefox 不能，IE 绝对不能，优化处理这种情况。

你应该throttle您对处理程序的调用。

请看这个 fiddle : https://jsfiddle.net/s2f9d77x/

此外，建议指定 transition: transform而不是 transition: all告诉浏览器不要担心元素的其他属性。