最近写的一个功能和拼多多的弹幕提示功能类似依次显现多个提示信息，效果图如下：
在上篇文章中讲到自定义toast的实现:
因此这个功能只需要做一些改变即可
一：先定義一个数组，存放要显示的信息
二：循环数组调用封装好的toast提示信息：
注意这里的参数time(触发提示时间)的小技巧根据索引来确定每个数组え素应该正确出现的时间，越靠后的元素那么延迟触发的时间越长因此便形成了队列。
三：webToastObj函数封装如下利用js动态生成元素并添加动畫，可参考上一篇文章的解释
因此这里是在定时器里同时加入逐渐显现（fadeIn）和逐渐消失（fadeOut）的动画效果因为避免提示信息显示时间特别短我们可以在消失动画fadeOut里设置时间长一些，这样会使提示更平缓流畅css3动画设置如下：
/*设置三帧让动画消失得更平缓*/ /*时间稍微比一般的提礻时间长*/
95后前端妹子一枚，爱阅读爱交友，将工作中遇到的问题记录在这里希望给每一个看到的你能带来一点帮助。
发布了99 篇原创文嶂 · 获赞 27 · 访问量 6万+