javascript - 使用 waypoints.js 和anime.js 分别为具有相同类的元素设置动画

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 类时，当另一个标题进入视口时，所有标题都会再次动画。我是否使用 .title1、.title2 等制作脚本的副本？还是有更短的方法？

Answer 1

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

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

$(".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%'
});