Anime.js 不针对元素

如何解决Anime.js 不针对元素

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

$('.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：窗口，长度：1”，这是我以前从未见过的。这是一张图片...

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

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

$('.skillList div').mouSEOver(() => {
    $(this).addClass('temp');
    
        anime({
            targets: '.temp',duration: 2000
        });
})

...结果证明没用...

最后，我更进一步，为每个 div 元素添加了一个名为 Skill 的类，这样我就可以直接定位 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',duration: 2000
        });
})

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

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

解决方法

遍历您的项目并单独为它们附加一个事件：

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],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>