Question

当前，我进行了CSS过渡，其中div根据光标距div中心的距离向鼠标移动。当鼠标离开div时，div返回其原始位置。我有一些JavaScript，可以检查鼠标何时进入和离开div并应用所需的样式。

在Firefox上，当鼠标离开div时，过渡趋向于跳过，而不是缓慢地移回其原始位置，而是立即移回原处。在其他浏览器上似乎不会发生这种情况。

由于某种原因，包括任意e.target.getBoundingClientRect();解决了该问题，但我不确定为什么。这里发生了什么，我该如何正确解决？

function boxHover(e) {
    var posVector = calcHoverDist(e, 15);
    e.target.style.transitionDuration = "0.3s";
    e.target.style.transform = `scale(1.2)translate(${posVector[0]}px,${posVector[1]}px)`;
}

function boxLeave(e) {
    //e.target.getBoundingClientRect(); // brute force fix of transition bug
    e.target.style.transitionDuration = "0.8s";
    e.target.style.transform = "translate(0,0)";
}

[EDIT]添加此代码是因为在运行代码时很容易错过该问题。您可以通过在圆周方向上快速移动鼠标来重现该问题。

https://jsfiddle.net/b0fx4ae8/2/

Firefox CSS过渡在mouseleave上跳过动画

0 个答案: