一个元素，两个事件监听器，每个动画一个-Lottie

编程问答 2022-08-23

问题描述

我正在使用lottie-Web在按钮上放置一个svg动画。我想放置两个动画，一个位于悬停上，另一个单击。

我尝试了以下代码。

const btncerrar_hover = (fn) =>
  bodymovin.loadAnimation({
    container: logo,renderer: 'svg',loop: false,autoplay: false,prerender: true,frame: 1000,path: 'databoton.json',name: 'hover',})

const btncerrar_click = (fn) =>
  bodymovin.loadAnimation({
    container: logo,path: 'databotoncerrar_click.json',name: 'click',})

var logo = document.getElementById('bm')

var animation = btncerrar_hover()

animation.addEventListener('DOmloaded',function () {
  animation.goToAndStop(2000)

  logo.addEventListener('mouseenter',function () {
    animation.goToAndStop(0)
    animation.play()
  })

  logo.addEventListener('click',function (e) {
    e.preventDefault()
    animation = btncerrar_click(() => {
      logo.innerHTML = ''
      animation = btncerrar_hover()
      animation.goToAndStop(2000)
    })
    animation.goToAndStop(0)
    animation.play()

    return false
  })
})

很显然，它不能按预期方式工作，所以我正在寻求您的帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bodymovinjavascriptlottielottie