如何在 anime.js 中定位 $(this)

Question

我正在尝试在 <a> 标签上实现点击动画。有多个 <a> 标签，并且所有标签都具有相同的 class.

我该如何实现？

作为替代方案，我曾尝试使用 $(this).addClass('temp')

将 class 作为临时元素添加到目标元素

我想知道是否有更好的方法来真正做到这一点。

如果我按照上面的方法，我将无法带上延迟的动画。

样本

<script>
  $("a").click(function(){
    anime({
    targets:'a',
    opacity:[0,1],
    })
  });
</script>

Answer 1

您可以简单地将 e.currentTarget 传递给 targets 属性（accepts a DOM node），这样您就可以定位当前 <a> 元素事件监听器是绑定的。或者，您也可以传入 this：由您决定。

请参阅下面的概念验证。我已将不透明度调整为 0.25，以便您可以在单击元素之前实际看到该元素。

$("a").click(function(e) {
  e.preventDefault();
  anime({
    targets: e.currentTarget,
    opacity: [0.25, 1],
  })
});

a {
  opacity: 0.25;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>

或者不需要 jQuery:

直接在 JS 中完成

document.querySelectorAll('a').forEach(el => {
  el.addEventListener('click', e => {
    e.preventDefault();
    anime({
      targets: el,
      opacity: [0.25, 1],
    });
  });
});

a {
  opacity: 0.25;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>

如何在 anime.js 中定位 $(this)

How can I target $(this) in anime.js

javascript

jquery

animation

this

anime.js