时间戳

首页 > 解决方案 > Anim.js - 当我只想触发悬停的元素时输入什么作为目标

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

问题描述

我正在尝试使用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 
   });
});

标签： javascriptjqueryanime.js

解决方案

尝试这个：

$('.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，asthis指的是当前悬停的.grid-item。我曾经querySelector选择子元素，也是因为动漫是一个 Javascript 库，并且不包括 jQuery 对象。

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

推荐阅读