0

我有两张卡片,里面有一个动画图标。当我将鼠标悬停在图标上时,动画开始播放。现在我希望图标在卡片悬停时进行动画处理,而不是图标本身。我已经尝试了不同的选项,但没有奏效。

这是我目前拥有的代码,当图标本身悬停时有效:

 <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();
    })
})
4

0 回答 0