Anime.js 不针对元素

Question

我正在尝试为单个类的每个元素创建鼠标悬停触发的动画，并且遇到了单独针对相关类实例的问题。我唯一能做的就是使用整个类本身作为目标，如下所示。

$('.skillList div').mouseover(() => {
        anime({
            targets: '.skillList div',
            translateX: 2000,
            easing: 'easeOutElastic(1, .6)',
            duration: 2000
        });
})

但是，上面的代码会导致每个元素 (div) 的动画都具有 .skillList 的父元素。我想要做的是更具体到每个元素（div）。我已经尝试通过下面显示的多种方法使用 $(this) 作为目标...

targets: '$(this)'

targets: $(this)

targets: [$(this)]

targets: '[$(this)]'

targets: ['$(this)']

targets: 'this'

targets: this

...令我惊讶的是，没有效果。

我用控制台做了一点调试，并确保鼠标悬停功能不是问题。

console.log("hovered");

^^ 表明每个元素都有自己的鼠标悬停功能。

我也很好奇“this”是否返回了一个与动画兼容的元素，这让事情变得更加混乱。在控制台记录“$(this)”后，我注意到它返回了一个嵌套对象，其中它的根包含属性“0: Window, length: 1”，这是我以前从未见过的。这是一张照片……

话虽如此，在列出的任何尝试中定位“this”时，我都没有遇到错误。所以我怀疑“this”不能用于 .anime()，但是，我确实知道“this”（应该是鼠标悬停元素）没有被定位。

此外，我还尝试向 mouseover 元素添加一个临时类，以便我可以按类名定位它，如下所示...

$('.skillList div').mouseover(() => {
    $(this).addClass('temp');
    
        anime({
            targets: '.temp',
            translateX: 2000,
            easing: 'easeOutElastic(1, .6)',
            duration: 2000
        });
})

...事实证明没用...

最后，我更进一步，为每个 div 元素添加了一个类，称为技能，这样我就可以直接定位 div，而不是通过其父 .skillList。

<div class="skillList">
    <div class="skill">&lthtml&gt</div>
    <div class="skill">.css {}</div>
    <div class="skill">javascript()</div>
    <div class="skill">$php</div>
    <div class="skill">def python():</div>
</div>

$('.skill').mouseover(() => {
    $(this).addClass('temp');
    
        anime({
            targets: '.temp',
            translateX: 2000,
            easing: 'easeOutElastic(1, .6)',
            duration: 2000
        });
})

请注意，我还使用新的鼠标悬停元素（“.skill”）尝试了上述所有尝试。不用说，这些尝试都没有奏效，我对使用什么作为我的animejs目标感到非常困惑。我几乎可以肯定的一种解决方案是给 .skillList 的每个元素一个唯一的 ID，并为每个元素制作一个动画功能。不过，我想避免冗余，我相信你们都会明白这一点。

提前感谢您的宝贵时间，对于这么长的帖子，我深表歉意！ 干杯:)

Answer 1

遍历您的项目并将事件单独附加到它们：

let skills = document.querySelectorAll('.skillList div');

skills.forEach(skill=>{
  
  skill.addEventListener('mouseover', function() {
   
      anime({
          targets: skill,
          translateX: 50,
          easing: 'easeOutElastic(1, .6)',
          duration: 2000
       });

  });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="skillList">
  <div>skill 1</div>
  <div>skill 2</div>
  <div>skill 3</div>
  <div>skill 4</div>
  <div>skill 5</div>
</div>

如果你想用jQuery 来做这个，你可以这样做：

let skills = $('.skillList div');

skills.each(function(i) {
  let skill = $(this);
  
  skill.on('mouseover', function() {
      anime({
          targets: skills[i],
          translateX: 50,
          easing: 'easeOutElastic(1, .6)',
          duration: 2000
       });  
  });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="skillList">
  <div>skill 1</div>
  <div>skill 2</div>
  <div>skill 3</div>
  <div>skill 4</div>
  <div>skill 5</div>
</div>