时间戳

首页 > 解决方案 > jQuery：anime.js 到多个相同的目标

jquery - jQuery：anime.js 到多个相同的目标

问题描述

$(".ml3").spanLetters();

$('.ml3').on('inview', function(event, isInView) {if (isInView) {

    var $this = $(this);  

    anime.timeline({loop: false}).add({
        targets: '.ml3 .letter',
        opacity: [0,1],
        easing: "easeInOutQuad",
        duration: 550,
        delay: function(el, i) {
            return 80 * (i+1)
        }
    });

}});

如何更改此设置，以便动画仅针对视图中的当前元素触发，而不是页面上的所有 .ml3 类？所以它只使用'this'元素？

标签： jquery

解决方案

试试下面的。目标是尝试构造选择器，该选择器将针对视图发生的特定元素。

var $allML3 = $('.ml3').on('inview', function(event, isInView) {
  if (isInView) {
    var index = $allML3.index(event.target);
    var specificTargetSelector = `.ml3:nth-child(${index + 1}) .letter`
  
    anime.timeline({
      loop: false
    }).add({
      targets: specificTargetSelector,
      opacity: [0, 1],
      easing: "easeInOutQuad",
      duration: 550,
      delay: function(el, i) {
        return 80 * (i + 1)
      }
    });
  }
});

这index + 1是由于:nth-child()从 1 而不是 0 开始。

推荐阅读