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

【问题标题】：Animate elements with the same class individually with waypoints.js and anime.js使用 waypoints.js 和anime.js 分别为具有相同类的元素设置动画
【发布时间】：2021-03-17 14:53:25
【问题描述】：

我有这个脚本，当它进入带有 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 等制作脚本的副本？还是有更短的方法？

【问题讨论】：

标签： javascript jquery jquery-waypoints anime.js waypoint

【解决方案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%'
});

【讨论】：