交叉点观察器和动画数字计数器

Question

下面代码的问题是计数器不会同时停止。 有没有办法调整计数器的持续时间？ 据我所知，通过使用动画函数JQuery可以调整持续时间，但我想知道如何将它与 Intersection Observer 结合起来，以便在动画数字变得可见时运行它们。

 const counterElements = document.querySelectorAll(".count"); // Counters function counter(target, start, stop) { target.innerText = 0.1; const counterInterval = setInterval(() => { start += 0.1; const valueConverted = (Math.round(start * 100) / 100).toFixed(1); target.innerText = valueConverted; if (valueConverted == stop) { clearInterval(counterInterval); } }, 30); } function obCallBack(entries) { entries.forEach((entry) => { const { target } = entry; const stopValue = target.innerText; const startValue = 0; if (!entry.isIntersecting) return; counter(target, startValue, stopValue); counterObserver.unobserve(target); }); } const counterObserver = new IntersectionObserver(obCallBack, { threshold: 1 }); counterElements.forEach((counterElem) => counterObserver.observe(counterElem));

 .emptyspace{ height:400px; }

 <div class="emptyspace"></div> <p class="count">5.2</p> <p class="count">50.9</p> </div>

Answer 1

您应该使用比率而不是固定数字。

const speed = 100;
const inc = Number(stop / speed);

 const counterElements = document.querySelectorAll(".count"); const speed = 100; // the lower the slower // Counters function counter(target, start, stop) { target.innerText = 0.1; const counterInterval = setInterval(() => { const inc = Number(stop / speed); start += inc; const valueConverted = (Math.round(start * 100) / 100).toFixed(1); target.innerText = valueConverted; if (valueConverted == stop) { clearInterval(counterInterval); } }, 30); } function obCallBack(entries) { entries.forEach((entry) => { const { target } = entry; const stopValue = target.innerText; const startValue = 0; if (!entry.isIntersecting) return; counter(target, startValue, stopValue); counterObserver.unobserve(target); }); } const counterObserver = new IntersectionObserver(obCallBack, { threshold: 1 }); counterElements.forEach((counterElem) => counterObserver.observe(counterElem));

 .emptyspace{ height:400px; }

 <div class="emptyspace"></div> <p class="count">5.2</p> <p class="count">50.9</p> </div>