Question

$(".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”元素？

Answer 1

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

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开始。

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

1 个答案: