闲话：刚进新公司，接了一个项目，大致实现一个周年庆app，m活动页，统计你的在线数据blablblabl...需求：页面上有一个功能，就是获取db中的50条数据进行弹幕展示。用户也可以自行发送弹幕。弹幕显示后会循环显示。一、弹幕功能存在以下问题：1.弹幕速度位移距离2.弹幕频道（要求有3个弹幕频道）3.当前页面弹幕数量（效果图数量）我实现的这里通过vue的transition组件来实现弹幕功能，因为之前在官网上看到过例子，用vue这么久，一直没用过，所以这次就拿来练习一下。顾名思义，过度组件就是在渲染内容发生变化时触发的组件。官网例子如下：我的思路很简单：v-for循环数组arr，li里面渲染内容item.msg，每次维护更新这个数组arr，触发过多组件的回调函数，回调函数很简单，这里就不多说了。在进入之前，进入，进入和离开都有一个想法。先从弹幕的实现说起。弹幕初始位置要留：100%。结束位置应该是-el.offsetwidth的位置。这里有一个问题。我们的弹幕内容是头像+消息。如果弹幕元素绝对定位在beforeEach或者初始值设置为100%left，那么这里是无法获取到正确的元素宽度的（具体原因大家可以自行查找，这里不多做解释），所以我们只设置弹幕进入当前窗口时的宽度el.style.width=el.offsetWidth+20+'px'其中20px是我们的头像部分在enter阶段开始运动。练习的终点在哪里？我们在enter回调函数中加入velocity动画，（为什么要用velocity？因为我喜欢他的completehook，可以直接移除元素，太酷了！我可以保证运行后弹幕立即消失。页面效率一定会保证！）通过以上操作，一个弹幕就可以完美施展了！一旦有了弹幕，就得考虑把弹幕一个一个添加到可见窗口，计时开始！setInterval每隔几秒向数组推送一条数据，刷新浏览器，就可以看到结果了！结果很惨……过多的组件默认一起执行。我在10秒内给数组添加了10条数据，数据一起动了！这自然不是我们想要的，怎么办？我给数组的每一项都绑定了一个自定义属性，然后在enter的钩子函数中获取到。没有索引，定时器在设置延迟秒数后执行动画。所有弹幕都能完美运行！最后是渠道问题。需要三个通道。我没有设置弹幕的最高值。这里的大致思路是随机获取，或者写一些固定的值来保证间距来给弹幕设置top值。管道的最高值匹配。好的。这就是基本功能的实现方式。ps：以下是我对这个小功能的个人感想1、上面说到绝对定位元素无法获取正确的宽度。如果在弹幕入口的钩子里没有设置宽度，弹幕宽度会出现奇怪的情况（只能根据你的msg或者头像的content宽度展开），这是css定位的问题，等我发现了有时间2.velocity的完整钩子函数是如何实现的？我猜大概是监听动画完成的事件（存在兼容性问题），然后进行封装。这里如果要用native，感觉应该是在timer里监听弹幕是否在可见窗口。3.自定义属性巧妙实用。这一步真的很不错。每个弹幕都绑定了下标，移动时可以有序加载弹幕。4.弹幕速度、高度、时间等具体参数，你可以想象每一次弹幕的轨迹，可以在move函数中实现。5、根据问题3，考虑是否可以优化弹幕页？弹幕现在的情况是，弹幕有条不紊地加载到屏幕外的最右边，然后开始固定延时移动。可以保证每一次弹幕的间隔是一致的，或者通过获取每一次弹幕的移动距离，达到同样的弹幕速度，是否会出现级联弹幕？理论上是的，（3轨的情况下）如果第一弹幕很长，第二弹幕和第三弹幕的长度一般，而且每个弹幕的间隔是一样的，第四弹幕可能在第一弹幕里一个弹幕还没消失就出现了，造成级联...这里我想根据每个弹幕的宽度来设置延迟，让每个弹幕的间隔时间变得不同，这样不同的弹幕就会叠加。6、有没有更好的解决办法？想象一下：当前只有一个动画，所有的弹幕都在一个容器里，根据弹幕的宽度设置每个弹幕的间距和位置，然后整个画布一起滑过可见窗口，类似于旋转木马。但是难点是初始设置位置和结束的判断，因为要求是无限重复加载弹幕...pps:开始想小弹幕，SOEZ，结果在运行过??程中流程、CSS、JS、逻辑、动画等等统统搞定。很麻烦！
