当我将鼠标悬停在 div 上时，动画应该开始答案

【问题标题】：Animation should start when I hover over the div当我将鼠标悬停在 div 上时，动画应该开始
【发布时间】：2022-01-07 22:59:01
【问题描述】：

我想实现以下内容：动画应该只在我将鼠标悬停在 div 上时开始。将鼠标悬停在 div 上后，结束编号应该保持可见，并且不会更改为开始值。

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Animation</title>
<style>
    .counter{
        color: white;
        font-size: 100px;
        height: 300px;
        width: 400px;
        background-color: black;
        display: flex;
        align-items:center;
        justify-content: center;
    }

    .animate{
        position:absolute;
        opacity:0;
        transition:0s 180s;
    }
    .animate:hover {
        opacity:1;
        transition:0s;
    }

   
</style>
</head>

<body>
    
    <div id="animate" style="background-color: orange; width: 300px; height: 200px;" class="counter" data-target="500">0</div>

<script>
const counters = document.querySelectorAll('.counter');
for(let n of counters) {
  const updateCount = () => {
    const target = + n.getAttribute('data-target');
    const count = + n.innerText;
    const speed = 5000; // change animation speed here
    const inc = target / speed; 
    if(count < target) {
      n.innerText = Math.ceil(count + inc);
      setTimeout(updateCount, 1);
    } else {
      n.innerText = target;
    }
  }
  updateCount();
}
</script>

</body>
</html>

【问题讨论】：

尝试在鼠标悬停事件发生时在元素上启动动画，而不是将它们全部设置为从一开始就开始动画。
我已经修改了我的问题...如何实现鼠标悬停事件？

标签： html css animation

【解决方案1】：

将 onmousover 添加到 id="animate"

<div id="animate" style="background-color: orange; width: 300px; height: 200px;" class="counter" data-target="500" onmouseover="animationEffect();">0</div>

将整个脚本包装在一个方法中：

function animationEffect(){
    const counters = document.querySelectorAll('.counter');
    for(let n of counters) {
    const updateCount = () => {
        const target = + n.getAttribute('data-target');
        const count = + n.innerText;
        const speed = 5000; // change animation speed here
        const inc = target / speed; 
        if(count < target) {
        n.innerText = Math.ceil(count + inc);
        setTimeout(updateCount, 1);
        } else {
        n.innerText = target;
        }
    }
    updateCount();
    }
}

应该解决问题

【讨论】：

谢谢！！！！！！！！！

【解决方案2】：

编辑：

旧答案是指编辑之前的问题。对于目前的情况，可以做以下事情：

const updateCount = n => {
  const target = +n.getAttribute('data-target')
  const count = +n.innerText
  const speed = 5000 // change animation speed here
  const inc = target / speed
  if (count < target) {
    n.innerText = Math.ceil(count + inc)
    requestAnimationFrame(() => updateCount(n))
  } else {
    n.innerText = target
  }
}

const counters = document.querySelectorAll('.counter')
for (let n of counters) {
  n.addEventListener('mouseenter', () => updateCount(n), {
    once: true
  })
}

.counter {
  color: white;
  font-size: 100px;
  height: 300px;
  width: 400px;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
}

.animate {
  position: absolute;
  opacity: 0;
  transition: 0s 180s;
}

.animate:hover {
  opacity: 1;
  transition: 0s;
}

<div id="animate" style="background-color: orange; width: 300px; height: 200px" class="counter" data-target="500">
  0
</div>

旧答案：

您需要将mouseenter 事件添加到父元素。请注意，{once: true} 选项将使事件仅触发一次。

const parent = document.getElementById('parent')
parent.addEventListener('mouseenter', mouseEnterHandler, {once: true})

然后定义mouseEnterHandler回调如下：

function mouseEnterHandler() {

  for (let n of counters) {
    n.style.display = 'block'
    updateCount(n)
  }

  /* If you only have one counter then just get it by its Id:
   const div = document.getElementById('hover-content')
   div.style.display = 'block'
   updateCount(div)
  */
}

n.style.display = 'block' 将使计数器可见，因此不需要 css 规则 #parent:hover #hover-content { display:block; }。

这是一个工作示例：

const updateCount = n => {
  const target = +n.getAttribute('data-target')
  const count = +n.innerText
  const speed = 5000 // change animation speed here
  const inc = target / speed
  if (count < target) {
    n.innerText = Math.ceil(count + inc)
    requestAnimationFrame(() => updateCount(n))
  } else {
    n.innerText = target
  }
}

const counters = document.querySelectorAll('.counter')
const parent = document.getElementById('parent')
parent.addEventListener('mouseenter', mouseEnterHandler, {
  once: true
})

function mouseEnterHandler() {
  for (let n of counters) {
    n.style.display = 'block'
    updateCount(n)
  }
}

.counter {
  color: white;
  font-size: 100px;
  height: 140px;
  width: 400px;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
}

#hover-content {
  display: none;
}

<div id="parent">
  Some content
  <div hidden id="hover-content" class="counter" data-target="232">0</div>
</div>

【讨论】：