先看效果:
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)
}
}
)
}