vue3.x 实现简单的弹幕功能

思路

• 定时器定时创建dom元素,
• 在创建dom的同时添加动画结束监听函数,动画执行完销毁
• 动画用animation dom创建后自动执行

代码

• js部分

 // 创建弹幕dom对象
    createBarrage(item) {
      const barrageContent = this.$refs.barrageContent //获取span的父元素
      const barrageSpan = document.createElement("span") //创建span dom
      barrageSpan.style.color = this.getColors() //设置随机颜色
      barrageSpan.innerHTML = item.content //将弹幕列表的内容赋值给弹幕盒子
      barrageSpan.className = "barrage" //动态绑定类名
      //避免前后两次在同一轨道
      var positionRand
      while (this.enterLoop) {
        positionRand = this.getPosition()
        if (this.oldPosition != positionRand) {
          barrageSpan.style.top = positionRand + "%"
          this.oldPosition = positionRand
          break
        }
      }
      // barrageSpan.style.top = this.getPosition() + "%" //设置随机高度

      //弹幕内容过长时提高弹幕速度
      if (item.content.length > 25 && item.content.length < 35)
        barrageSpan.style.animationDuration = "13s"
      else if (item.content.length >= 35)
        barrageSpan.style.animationDuration = "8s"

      barrageContent.appendChild(barrageSpan) //在barrageContent下创建子盒子

      //监听动画结束,回调函数中移除dom元素
      barrageSpan.addEventListener("animationend", function () {
        barrageSpan.remove()
      })
    },
//开始定时器
  mounted() {
    //自动开始定时器,播放弹幕
    //创建弹幕span的定时器
    var barrageListCopy = this.barrageList //创建弹幕副本,以便循环使用
    this.barrageTimer = setInterval(() => {
      if (barrageListCopy.length) {
        let first = barrageListCopy.shift()
        this.createBarrage(first)
      } else {
        // barrageListCopy = this.barrageList
        // 弹幕播放完成后摧毁定时器
        clearInterval(this.barrageTimer)
        this.barrageTimer = null
      }
    }, 2500)
  },

创建dom的函数写在mounted中,因为created钩子中还没有生成dom树,无法获取相应的父元素

• css部分

@keyframes right2left {
  0% {
    left: 100%;
  }
  100% {
    left: -130%;
  }
}
.barrage {
  display: block;
  position: absolute;
  animation: right2left 16s cubic-bezier(0.44, 0.4, 1, 1) forwards;
  font-size: 1.35vw;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #4a4a4a;
  /* 不定宽就会导致span一开始很窄 字会强制换行 */
  width: 150vw;
}

大坑!!! 如果使用了饿了么(element ui)插件,要把动画的定义已经新创建的dom的css样式定为全局样式,具体原因懒得查了,这个bug找了好久好久…