如何让jQuery inView结合anime.js的滚动动画仅触发一次？

我正在制作一个动画，希望滚动到指定文本时仅触发一次动画效果。目前代码功能正常，但每次滚动到该文本位置时动画都会重复触发，请问如何修改？

核心问题 #

inview事件会在元素每次进入视口时都触发回调，这就是动画重复执行的原因。我们只需要添加一次触发的限制逻辑即可解决。

方法一：用状态变量标记执行状态 #

新增一个变量记录动画是否已经执行过，只有当元素进入视口且动画未执行时，才触发播放：

修改后的JavaScript代码：

let hasPlayed = false; // 标记动画是否已执行
var fadeUpNormal = anime.timeline({
  loop: false,
  autoplay: false,
}).add({
  targets: '.fade-up-normal',
  translateY: [100,0],
  opacity: [0,1],
  translateZ: 0,
  easing: 'easeOutExpo',
  duration: 1400,
  delay: 1000 // 注意：原代码这里用了分号，需改成逗号避免语法错误
});

$('.scroll-trigger').on('inview', function(event, isInView) {
  if (isInView && !hasPlayed) {
    fadeUpNormal.play();
    hasPlayed = true; // 标记为已执行，后续不再触发
  }
});

方法二：触发后直接解绑事件 #

在第一次触发动画后，移除当前元素的inview事件监听，彻底杜绝后续触发：

修改后的JavaScript代码：

var fadeUpNormal = anime.timeline({
  loop: false,
  autoplay: false,
}).add({
  targets: '.fade-up-normal',
  translateY: [100,0],
  opacity: [0,1],
  translateZ: 0,
  easing: 'easeOutExpo',
  duration: 1400,
  delay: 1000 // 修正原代码的分号为逗号
});

$('.scroll-trigger').on('inview', function(event, isInView) {
  if (isInView) {
    fadeUpNormal.play();
    $(this).off('inview'); // 解绑当前元素的inview事件
  }
});

额外修正说明 #

原代码中动画配置的delay: 1000;末尾使用了分号，这会导致JavaScript语法错误，必须改为逗号delay: 1000,才能正常运行。

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