如何实现计数器动画移出视口后再次进入时重启

原代码通过变量a标记动画已执行过一次，导致元素再次进入视口时无法重启动画。要实现重复触发，需添加视口外检测逻辑重置计数器，并跟踪动画状态避免重复触发。

修改后的代码 #

JavaScript #

let isAnimating = false;

$(window).scroll(function() {
  const $counter = $('#counter');
  const counterTop = $counter.offset().top;
  const counterHeight = $counter.outerHeight();
  const windowScrollTop = $(window).scrollTop();
  const windowBottom = windowScrollTop + window.innerHeight;

  // 当计数器完全移出视口时，重置状态
  if (windowBottom < counterTop || windowScrollTop > counterTop + counterHeight) {
    $('.counter-value').text('0');
    isAnimating = false;
  }

  // 当计数器进入视口且未在动画中时，启动动画
  if (!isAnimating && windowBottom > counterTop && windowScrollTop < counterTop + counterHeight) {
    isAnimating = true;
    $('.counter-value').each(function() {
      const $this = $(this);
      const countTo = parseInt($this.attr('data-count'), 10);
      
      $({ countNum: 0 }).animate({ countNum: countTo }, {
        duration: 3000,
        easing: 'swing',
        step: function() {
          $this.text(Math.floor(this.countNum));
        },
        complete: function() {
          $this.text(countTo);
          // 所有计数器动画完成后，允许再次触发
          if ($('.counter-value:animated').length === 0) {
            isAnimating = false;
          }
        }
      });
    });
  }
});

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="counter">
  <div class="counter-container">
    <div class="counter-box">
      <div class="counter-value" data-count="30">0</div>
      <span></span>
      <p>Antal medarbejdere</p>
    </div>
    <div class="counter-box">
      <div class="counter-value" data-count="51000">0</div>
      <span></span>
      <p>Processeret udstyr i KG pr. md.</p>
    </div>
    <div class="counter-box">
      <div class="counter-value" data-count="51">0</div>
      <span></span>
      <p>Antal afhentninger pr. md.</p>
    </div>
  </div>
</div>

关键改动说明 #

• 移除了一次性标记变量a，改用isAnimating跟踪动画是否正在进行，避免滚动时重复触发动画。
• 添加视口外检测逻辑：当计数器元素完全移出视口时，将所有计数器重置为0，并允许下次进入时重新启动动画。
• 动画起始值固定为0，确保每次进入视口都从初始状态开始计数。
• 在动画完成回调中检查所有计数器动画是否都已结束，确保isAnimating仅在全部完成后才设为false。

内容的提问来源于stack exchange，提问作者Lasse Bo Jensen