CSS transition skipping animation on mouseleave

Currently I've made this CSS transition where a div motions towards the mouse based on the cursors distance from the center of the div. When the mouse leaves the div, the div goes back to its original position. I have some JavaScript that checks for when the mouse enters and leaves the div and applies the needed styling.

For some reason, the transition tends to skip when the mouse leaves the div and instead of slowly moving back to it's original position, it moves back instantly.

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

For some reason, including an arbitrary e.target.getBoundingClientRect(); fixed the issue but I'm not sure why. What's happening here and how should I properly fix this?

[EDIT] Adding this as it's easy to miss the issue when running the code. You can reproduce the issue by waving your mouse over the div quickly in a circular motion.

for (element of document.querySelectorAll("div.box")) {
    element.addEventListener("mousemove", boxHover, false);
    element.addEventListener("mouseleave", boxLeave, false);
}

// Event Handlers
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)";
}

/**
 * 
 * @param {*} e element
 * @param {*} max value div moves when mouse hovers edge of div
 */
function calcHoverDist(e, max) {
    var rect = e.target.getBoundingClientRect();
    var mouseX = e.clientX - rect.left - rect.width/2; // 0 represents the center horizontal of div
    var mouseY = e.clientY - rect.top - rect.height/2; // 0 represents the center vertical of div
    moveX = normalize(mouseX, 0, rect.width/2)*max;
    moveY = normalize(mouseY, 0, rect.height/2)*max;
    return [moveX, moveY];
}

function normalize(val, min, max) { return (val - min) / (max - min); }
.container {
  padding: 10%;
}

.box {
    float: left;
    margin-left: 25px;
    height: 100px;
    width: 100px;
    border-radius: 20px;
    background: #2e2e38;
    box-shadow: 0 0 8px rgb(24, 24, 24);
    transition: all 0.3s ease-out;
}

.box:hover {
    transform: scale(1.2);
}
<!DOCTYPE html>
<html>
  
</html>
<body>
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>
https://jsfiddle.net/b0fx4ae8/2/



Read more here: https://stackoverflow.com/questions/64410371/css-transition-skipping-animation-on-mouseleave

Content Attribution

This content was originally published by Hylu at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: