Воспроизвести анимацию Bodymovin на элемент родительского элемента - PullRequest
Новая
       39

Воспроизвести анимацию Bodymovin на элемент родительского элемента

0 голосов
/ 28 марта 2020

У меня есть две карты с анимированной иконкой в ​​них. При наведении курсора на значок начинает воспроизводиться анимация. Теперь я хочу анимировать значок при наведении карты, а не сам значок. Я уже опробовал разные варианты, но это не сработало.

Это код, который у меня есть на данный момент, который работает, когда наведен значок: 

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