在父元素悬停时播放Bodymovin动画

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

这是我当前拥有的代码,当图标本身悬停时可以使用:

 <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();
    })
})
song47295743 回答:在父元素悬停时播放Bodymovin动画

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/2562272.html

大家都在问