anime.js不以元素为目标

Question

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

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

但是，上面的代码生成了每个元素(div)的动画，这些元素(Div)的父元素是.skillList。我希望做的是更具体地针对每个元素(div)。我尝试通过下面显示的多种方法将$(this)用作目标...

targets: '$(this)'

targets: $(this)

targets: [$(this)]

targets: '[$(this)]'

targets: ['$(this)']

targets: 'this'

targets: this

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

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

console.log("hovered");

^^展示了每个元素都有自己的鼠标悬停功能。

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

​

话虽如此，在任何列出的尝试中，当以"this“为目标时，我都没有收到任何错误。因此，我怀疑"this“不能用于.anime()，然而，我确实知道"this”(应该是mouseover元素)不是目标。

此外，我还尝试向mouseover元素添加一个temp类，这样我就可以通过类名将其作为目标，如下所示……

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

...which被证明是无用的.

最后，我进一步向每个名为skill的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
        });
})

注意，我还尝试了使用新的mouseover元素(".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>

​