我有两张带有动画图标的卡片。当我将鼠标悬停在图标上时,动画开始播放。现在,我希望将鼠标悬停时图标进行动画处理,而不是图标本身。我已经尝试了不同的选择,但是没有用。
这是我当前拥有的代码,当图标本身悬停时可以使用:
<cm-onboarding-selection-card>
<cm-onboarding-animated-icon data-file="instagram"></cm-onboarding-animated-icon>
</cm-onboarding-selection-card>
var bm = $("cm-onboarding-animated-icon");
Array.prototype.forEach.call(bm, icon => {
var anim = bodymovin.loadAnimation({
container: icon,
path: `icons/${icon.dataset.file}.json`,
renderer: 'svg',
loop: false,
autoplay: false
})
icon.addEventListener('mouseenter', () => {
anim.setDirection(1)
anim.play();
})
icon.addEventListener('mouseleave', () => {
anim.setDirection(-1)
anim.play();
})
})