vue开发制作弹幕！！！

先看效果：

1，主要用到了vue自带的transition-group，动画过渡功能，以及一个动画插件velocity-animate.js

vue的动画过度页面介绍链接：

https://cn.vuejs.org/v2/guide/transitions.html

velocity-animate的动画插件链接：

https://github.com/julianshapiro/velocity

2，主要是利用了vue过度的勾子来开发弹幕，思想是

• 随机生成弹幕的高度
• 使弹幕一开始出现在最右侧
• 运动到最左侧消失

3，实践

template：

<transition-group tag="div"
                            name="slide"
                            v-on:before-enter="beforeEnter"
                            v-on:enter="enter">
            <div v-for="(item, index) in danmuarr"
                 :datatext="item"
                 v-bind:key="index+1"
                 class="danmubg">
              {{item}}
            </div>
          </transition-group>

js:

import velocity from 'velocity-animate'

 // 获取随机移动速度
    speedRandom () {
      const speed =
        document.getElementsByClassName('danmudiv')[0].offsetHeight /
        Math.floor(
          Math.random() * (this.speed.max - this.speed.min + 1) + this.speed.min
        )
      return parseInt(speed * 3000) // 转换成毫秒
    },
    // 随机高度
    positionRandom (insertH) {
      var eleheight = document.getElementsByClassName('danmudiv')[0]
        .offsetHeight
      const top = Math.floor(Math.random() * (eleheight - insertH)) // 随机的范围是弹幕显示区的高度-当前插入的弹幕高度
      return top
    },
    // 进入之前
    beforeEnter (el) {
      el.style.cssText = `left: 100%;`
    },
    // 此回调函数是可选项的设置
    // 与 CSS 结合时使用
    enter: function (el, done) {
      const insertH = el.offsetHeight
      el.style.top = `${this.positionRandom(insertH)}px` // 这块代码本想放在beforenter函数里，但获取不到当前元素的高度。
      velocity(
        el,
        {
          left: `-${el.offsetWidth}px`
        },
        {
          easing: 'swing',
          delay: 1000, // 动作多少秒后开始执行
          duration: this.speedRandom(),
          complete: () => {
            el.parentNode.removeChild(el)
          }
        }
      )
    }