javascript - Anim.js - 当我只想触发悬停元素时输入什么作为目标

Question

我正在尝试使用 anime.js 为名为 .grid-item 的 div 中的元素设置动画这是一个简单的悬停动画，当用户悬停时，文本和图标会出现动画。 .grid-item 在 Mansory 网格中重复，这就是它全部崩溃的地方。这个想法当然是只有悬停的 .grid-item 的 child 受到影响。目前所有的 .grid-item 都被触发.

当我删除动画功能并使用 $(this) 操作 CSS 属性时，一切正常。我似乎无法弄清楚在动画功能中输入什么作为目标。任何帮助将非常感激!

html

<div class="grid-item">
 <div class="grid-container">
  <div class="tl-item-rollover-wrapper">
    <img class="tl-svg-magnify" src="icons/icon.svg">
  </div>

  <div class="tl-item-copy-wrapper">
    <div class="tl-item-project-title">Line--01</div>
    <div class="tl-item-project-info">Line--02</div>
  </div>

  <div class="tl-category-wrapper">
    <i class="material-icons">cloud_queue</i>
  </div>

   <img class="tl-item-image" src="images/image.jpg"/>

 </div>
</div>

javascript(我现在拥有的)

$('.grid-item').hover(function() {
   anime ({
   targets: ['.tl-item-image', this],
   scale: 1.1,
   opacity: 0.6,
   easing: 'easeInOutQuart',
   duration: 700 
  });
}, function() {
   anime ({
   targets: ['.tl-item-image', this],
   scale: 1,
   opacity: 1,
   easing: 'easeInOutQuart',
   duration: 700 
   });
});

Answer 1

试试这个:

$('.grid-item').hover(function() {
   anime ({
   targets: [this.querySelector('.tl-item-image'), this.querySelector('.another-element')],
   scale: 1.1,
   opacity: 0.6,
   easing: 'easeInOutQuart',
   duration: 700 
  });
}, function() {
   anime ({
   targets: [this.querySelector('.tl-item-image'), this.querySelector('.another-element')],
   scale: 1,
   opacity: 1,
   easing: 'easeInOutQuart',
   duration: 700 
   });
});

显然，如果您不需要为多个内部元素设置动画，请删除 、this.querySelector('.another-element') 和方括号。

我使用了 this.querySelector，因为 this 指的是当前悬停的 .grid-item。我使用 querySelector 来选择子元素，还因为 anime 是一个 Javascript 库并且不排除 jQuery 对象。

演示: https://jsfiddle.net/rxcdayLz/20/