Search code examples
javascriptgoogle-chromeeventscss-animations

Triggering keyframe on mouseEvent

I am trying to trigger a CSS animation on mouseover event. Sadly, it does not work as desired.

This is what I tried. I am trying to achieve the same motion on mouseover as the keyframe declaration within CSS would.

It works as desired in Firefox +Chrome(mobile) but not in Chrome (PC).

const element = document.querySelector('.circ');
element.addEventListener('mouseover', function() {
console.log(1);
    element.style.animation = "move 1000ms infinite ease-in-out alternate";
});
element.addEventListener('mouseout', function() {
//mouseout triggers automatically following mouseover without provocation
console.log(2); 
    element.style.animation = "none";
});
.circ {
     pointer-events: all;
}
 .rect {
     pointer-events: none;
}
 @keyframes move {
     0% {
         transform: translateX(0);
    }
     100% {
         transform: translateX(500px);
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
  <div id="container" class="svg-container">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 100">
      <rect x="0" y="0" width="530" height="200" fill="#EFEFEF"></rect>
      <g class="crcl">  
        <circle class="circ" cx="10" cy="50" r="10" fill="blue"></circle>
      </g>
    </svg>
  </div>

</body>

</html>

Solution

  • It is possible to achieve the desired effect with existing mouseover and mouseout by overlaying the exact same transparent element as the recipient keyframe element. Then add a listener on the overlaid element to program the movement on the bottom element.

    Such as

    const data = [
    [0, 0], //bottom for action i=0, top for overlaying i=1
    [1, 1],
    [2, 2]
];

const svg = d3.select('svg');

const grp =
    svg
    .append('g')
    .classed('all', true);

const circ = grp
    .selectAll('g')
    .data(data)
    .join('g')
    .attr('id', (_, i) => i)
    .attr('transform', (_, i) => `translate(0 ${20*(i+1)})`)
    .selectAll('circle')
    .data(function(_, i) {
        return data[i]
    })
    .join('circle')
    .attr('id', function(_, i) {
        return d3.select(this).node().parentNode.id + i
    })
    .attr('cx', (_, i) => 20)
    .attr('cy', (_, i) => 20)
    .attr('r', '5')
    .attr('fill', (_, i) => { if (i === 0) { return 'blue' } else { return 'transparent' } }); //bottom blue, overlay transparent



d3.selectAll('svg g.all g circle:nth-of-type(2)').on('mouseover', function(_, i) {
        d3.select(
                d3.select(this).node().parentElement.firstChild
            ).style('animation', 'move 1000ms infinite ease-in-out alternate')
            
    })
    .on('mouseout', function(_, i) {
        d3.select(
            d3.select(this).node().parentElement.firstChild
        ).style('animation', 'none')
    })
    #container>svg>g>g>circle:nth-child(1) {
    pointer-events: none;
}

@keyframes move {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(500px);
    }
}
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div id="container" class="svg-container">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 100">
        <rect x="0" y="0" width="530" height="200" fill="#EFEFEF"></rect>
      </svg>
    </div>
</body>
<script src="prod.js"></script>

</html>