Question

我正在使用gsap播放一些动画。不同的悬停是相同的动画。我试图将动画绑定在一起，使其仅在特定的悬停上运行。因此，当我将鼠标悬停在data-filter =“ one”上时，动画仅在li id-one上运行

非常感谢所有帮助-非常感谢

<ul>
<li>
<a class="filter-hover filter-hover--left" data-filter="one" 
 href="#">
</a>
</li>
<li>
<a class="filter-hover filter-hover--left" data-filter="two" 
href="#">
</a>
</li>
<li>
<a class="filter-hover filter-hover--left" data-filter="three" 
 href="#">
</a>
</li>
<ul>

<ul>
<li id="one" class=" filter__types-container"></li>
<li id="two" class=" filter__types-container"></li>
<li id="three" class=" filter__types-container"></li>
</ul>

function escHover() {

tl = new TimelineLite({
  paused: true
}),

fadeIn = $('.filter-fade-img');
dormant = $('.js-filter-esc-dormant');

TweenLite.set(fadeIn, {
  opacity: 0,
  y: '50px',
  ease: Back.easeOut
})

tl.to(dormant, 0.3, {
  y: '50px',
  opacity: 0
}, 0.1, "+=0.1");

tl.staggerTo(fadeIn, 0.5, {
  y: '0',
  opacity: 1
}, 0.1, "+=0.1");

//// not using this yet
var filterHover = $('.filter-hover')
var dataMap = $(this).attr('data-filter');
$('#' + dataMap).fadeIn();

filterHover.mouseenter(function () {
    tl.play();
});

filterHover.mouseleave(function () {
    tl.reverse();
});
}

Answer 1

一种方法是使用像这样的方法：

document.querySelectorAll("[data-filter]").forEach(filter => {
  filter.addEventListener("mouseover", function() {
    TweenMax.to("#" + filter.dataset.filter, 1, { autoAlpha: 1 });
  });
  filter.addEventListener("mouseleave", function() {
    TweenMax.to("#" + filter.dataset.filter, 1, { autoAlpha: 0 });
  });
});

https://codepen.io/ZachSaucier/pen/GbxNbq

GSAP-如何将动画绑定到特定的数据属性？

1 个答案: