Animation 應該在我 hover 超過 div 時啟動

Question

我想實現以下內容： animation 應該僅在我將鼠標 hover 放在 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>

Answer 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();
    }
}

應該解決問題

Answer 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; } #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>

Animation 應該在我 hover 超過 div 時啟動

問題描述

2 個解決方案

解決方案1
0 已采納 2021-12-01 12:49:10

解決方案2
0 2021-12-01 12:54:28

Animation 應該在我 hover 超過 div 時啟動

問題描述

2 個解決方案

解決方案1 0 已采納 2021-12-01 12:49:10

解決方案2 0 2021-12-01 12:54:28

解決方案1
0 已采納 2021-12-01 12:49:10

解決方案2
0 2021-12-01 12:54:28