使用 waypoints.js 和 anime.js 分别对具有相同 class 的元素进行动画处理

Question

我有这个脚本，当标题进入带有 viewport.js 和 anime.js 的视口时动画标题：

$(".title").waypoint(function() {
anime.timeline({loop: false})
  .add({
    targets: '.title span',
    rotateY: [-90, 0],
    duration: 1300,
    delay: (el, i) => 45 * i
  });
}, {
            offset: '100%'
});

当我多次使用 .title class 时，当另一个标题进入视口时，所有标题都会再次动画。我是否使用 .title1、.title2 等复制脚本？或者有更短的路吗？

Answer 1

问题是因为 .title span select 或 targets select 中的所有元素。

要select仅与已触发的航路点相关的元素，请使用this.element。从那里您可以找到要调用 anime 的 span 元素。试试这个：

$(".title").waypoint(function() {
  anime.timeline({
    loop: false
  }).add({
    targets: this.element.querySelectorAll('span'),
    rotateY: [-90, 0],
    duration: 1300,
    delay: (el, i) => 45 * i
  });
}, {
  offset: '100%'
});

使用 waypoints.js 和 anime.js 分别对具有相同 class 的元素进行动画处理

Animate elements with the same class individually with waypoints.js and anime.js

javascript

jquery

jquery-waypoints

anime.js

waypoint