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

【问题标题】：Anim.js - what to enter as target when I only want the trigger the hovered elementsAnim.js - 当我只想触发悬停的元素时输入什么作为目标
【发布时间】：2018-08-15 19:25:57
【问题描述】：

我正在尝试使用anime.js 为名为.grid-item 的div 中的元素设置动画这是一个简单的悬停动画，当用户悬停时，文本和图标会出现动画。 .grid-item 在 Mansory 网格中重复，这就是它全部崩溃的地方。这个想法当然是只有悬停的 .grid-item 的孩子受到影响。此时所有 .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 
   });
});

【问题讨论】：

标签： javascript jquery anime.js

【解决方案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/

【讨论】：