如何在Scrollreveal.js的afterReveal回调中调用CountUp函数？

你当前代码的问题出在afterReveal回调里的domEl.demo()这一行——domEl是被ScrollReveal触发显示的DOM元素（也就是#mails这个div），它本身并没有demo方法，demo是你单独定义的CountUp实例变量，所以不能通过DOM元素去调用它。

正确的写法是直接在回调里调用demo实例的start()方法（CountUp需要通过start()来启动计数动画），下面是修正后的完整代码：

// 先初始化CountUp实例（确保options已正确配置）
var options = {
  // 示例配置，可根据你的需求调整
  useEasing: true,
  useGrouping: true,
  separator: ',',
  decimal: '.'
};
var demo = new CountUp('mails', 0, 641, 0, 2.5, options);

// 初始化ScrollReveal（如果还没做的话）
var sr = ScrollReveal();

// 配置滚动显示并绑定回调
sr.reveal('#mails', {
  duration: 600,
  delay: 200,
  distance: '220px',
  easing: 'ease-out',
  origin: 'left',
  scale: 1,
  viewFactor: 0.2,
  afterReveal: function(domEl) {
    // 直接调用CountUp实例的start方法启动计数
    if (!demo.error) {
      demo.start();
    } else {
      // 可选：打印初始化错误信息方便调试
      console.error('CountUp初始化失败:', demo.error);
    }
  }
});

关键要点说明： #

• afterReveal的参数domEl仅用于指代当前被显示的DOM元素，和你的CountUp实例没有关联，所以直接使用外部定义的demo变量即可。
• CountUp实例创建后不会自动启动，必须调用start()方法才会开始执行计数动画。
• 增加错误判断可以帮你排查CountUp初始化失败的问题（比如DOM元素不存在、参数错误等）。

额外注意事项： #

• 确保代码在#mails元素加载完成后执行（比如放在页面底部，或者包裹在DOMContentLoaded事件监听里）。
• 确认ScrollReveal和CountUp的脚本都已正确引入到页面中。

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