如何解决使用 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%'
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。