求助：元素进入视口时触发anime.js动画（waypoints.js）遇this问题

嘿，我帮你捋清楚这个问题！用Waypoints配合Anime.js做元素进入视口的动画时，this的指向确实是个很容易踩的坑，我来给你拆解下常见问题和修复方案：

核心问题：Waypoints回调里的this默认指向不是DOM元素 #

Waypoints的回调函数中，默认this指向的是Waypoint实例对象，而不是你要绑定动画的DOM元素。如果你直接写anime({targets: this, ...})，相当于给Waypoint实例做动画，自然看不到效果。

修复方案1：用this.element获取目标DOM元素 #

Waypoint实例自带element属性，专门指向绑定的DOM元素，这是最直接的解决方式：

// 示例代码：给单个元素绑定视口触发动画
new Waypoint({
  element: document.querySelector('.animate-element'),
  handler: function(direction) {
    // 这里的this是Waypoint实例，this.element才是你要动画的DOM元素
    anime({
      targets: this.element,
      opacity: [0, 1],
      translateY: [30, 0],
      duration: 800,
      easing: 'easeOutCubic'
    });
    // 可选：触发一次后销毁Waypoint，避免重复滚动时重复触发动画
    this.destroy();
  },
  offset: '80%' // 元素进入视口80%高度时触发，可根据需求调整
});

修复方案2：用箭头函数绑定外部上下文（类/模块场景） #

如果你的代码是在类或者有外部上下文的模块里，箭头函数会继承外部的this，这时候直接用循环里的DOM元素变量会更清晰，避免this混淆：

// 示例：批量给多个元素绑定动画
class ScrollAnimation {
  init() {
    const animateItems = document.querySelectorAll('.scroll-animate');
    
    animateItems.forEach(item => {
      new Waypoint({
        element: item,
        // 箭头函数的this指向外部的ScrollAnimation类实例
        handler: (direction) => {
          anime({
            targets: item,
            scale: [0.9, 1],
            opacity: [0, 1],
            duration: 600,
            delay: 100
          });
          // 调用类里的其他方法时，this能正确指向类实例
          this.markAsAnimated(item);
        },
        offset: '70%'
      });
    });
  }

  markAsAnimated(element) {
    element.classList.add('animated');
  }
}

// 初始化
new ScrollAnimation().init();

额外排查要点 #

• 确认Waypoints和Anime.js都正确加载，注意加载顺序（比如Waypoints纯JS版本不需要jQuery，别搞错版本）
• 给目标元素设置初始状态（比如opacity: 0; transform: translateY(30px);），不然动画从当前可见状态开始，看不出变化
• 检查offset参数是否合理：比如offset: '100%'意味着元素完全进入视口才触发，可能你没滚动到对应位置

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