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

问题描述

我有这个脚本，当它使用 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 等制作脚本的副本？或者有更短的方法吗？

解决方法

问题是因为 .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%'
});