如何实现鼠标hover div时启动数字计数动画且结束后保持最终值

核心修改思路 #

• 移除原有不相关的过渡动画CSS，原有CSS逻辑和计数动画需求不匹配
• 给计数元素添加是否已触发动画的状态标记，避免重复触发
• 将计数启动逻辑绑定到mouseenter事件，仅首次hover时触发计数，触发后状态永久锁定，数值保持最终结果

完整可运行代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Hover触发计数动画</title>
<style>
    .counter{
        color: white;
        font-size: 100px;
        height: 200px;
        width: 300px;
        background-color: orange;
        display: flex;
        align-items:center;
        justify-content: center;
        cursor: pointer;
    }
</style>
</head>
<body>
    <div class="counter" data-target="500">0</div>

<script>
const counters = document.querySelectorAll('.counter');
for(let n of counters) {
  // 初始标记动画未触发
  n.isAnimated = false;

  const updateCount = () => {
    const target = + n.getAttribute('data-target');
    const count = + n.innerText;
    const speed = 5000; // 数值越大动画越慢
    const inc = target / speed; 
    if(count < target) {
      n.innerText = Math.ceil(count + inc);
      setTimeout(updateCount, 1);
    } else {
      n.innerText = target;
    }
  }

  // 绑定hover触发逻辑
  n.addEventListener('mouseenter', () => {
    if(!n.isAnimated) {
      n.isAnimated = true;
      updateCount();
    }
  })
}
</script>
</body>
</html>

效果说明 #

• 页面首次加载时，数值保持初始值0
• 鼠标移入div区域时，立即启动从0到500的计数动画
• 动画结束后数值永久停在500，后续不管鼠标移入移出都不会重置或重新触发动画

内容的提问来源于stack exchange，提问作者dwayne1929