使用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

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

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