javascript - 使用 waypoints.js 和 Anime.js 分别对具有相同类的元素进行动画处理

Question

我有一个脚本，当标题进入视口(viewport)时使用 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 类时，当另一个标题进入视口(viewport)时，所有标题都会再次显示动画。我是否可以使用 .title1、.title2 等复制脚本？或者有更短的方法吗？

Answer 1

问题是因为 targets 中的 .title span 选择器选择了所有元素。

要仅选择与已触发的航路点相关的元素，请使用 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%'
});