anime.js 未定位元素

Question

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

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

但是，上面的代码会生成每个元素 (div) 的动画，其中 parent 为 .skillList。我要做的是更具体地针对每个元素 (div)。我尝试通过下面显示的多种方法使用 $(this) 作为目标...

targets: '$(this)'

targets: $(this)

targets: [$(this)]

targets: '[$(this)]'

targets: ['$(this)']

targets: 'this'

targets: this

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

我用控制台进行了一些调试，并确保鼠标悬停功能没有受到指责。

console.log("hovered");

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

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

综上所述，在列出的任何尝试中定位“this”时，我都没有收到任何错误。所以我怀疑“this”不支持 .anime()，但是，我知道“this”（应该是鼠标悬停元素）没有被定位。

此外，我还尝试将临时 class 添加到鼠标悬停元素，这样我就可以通过 class 名称来定位它，如下所示...

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

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

最后，我更进一步，为每个名为 skill 的 div 元素添加了一个 class，这样我就可以直接定位 div 而不是通过它parent.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") 尝试了上述所有尝试。不用说，这些尝试中有 none 成功了，我对使用什么作为我的 animejs 目标感到非常困惑。我几乎可以肯定的一种解决方案是为 .skillList 的每个元素提供一个唯一的 ID，并为每个元素制作一个动画函数。但是，我想避免冗余，我相信你们都会明白这一点。

预先感谢您的宝贵时间，对于这么长的时间，我深表歉意post！干杯:)

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>

anime.js 未定位元素

anime.js not targetting elements

html

javascript

jquery

anime.js