最近写的一个功能和拼多多的弹幕提示功能类似，依次显现多个提示信息，效果图如下：
在上篇文章中讲到自定义toast的实现:网页自定义toast提示框，
因此这个功能只需要做一些改变即可
一：先定义一个数组，存放要显示的信息
var arr = ["A","B","C","D","E"]
二：循环数组调用封装好的toast提示信息：
for(var i = 0,l=arr.length;i<l;i++){
webToastObj({
message:"我是"+arr[i]+"，欢迎您",
time:(i+1)*1500
})
}
注意这里的参数time(触发提示时间)的小技巧，根据索引来确定每个数组元素应该正确出现的时间，越靠后的元素那么延迟触发的时间越长，因此便形成了队列。
三：webToastObj函数封装如下，利用js动态生成元素并添加动画，可参考上一篇文章的解释(网页自定义toast提示框)
var webToastObj = function(params) {
var time = params.time;
if(time == undefined || time == ''){
time = 1500;
}
setTimeout(function () {
var el = document.createElement("div");
el.setAttribute("class", "web-toast");
el.innerHTML = params.message;
document.body.appendChild(el);
el.classList.add("fadeIn");
el.classList.remove("fadeIn");
el.classList.add("fadeOut");
el.addEventListener("animationend", function () {
document.body.removeChild(el);
});
el.addEventListener("webkitAnimationEnd", function () {
document.body.removeChild(el);
});
}, time);
}
因此这里是在定时器里同时加入逐渐显现（fadeIn）和逐渐消失（fadeOut）的动画效果，因为避免提示信息显示时间特别短我们可以在消失动画fadeOut里设置时间长一些，这样会使提示更平缓流畅，css3动画设置如下：
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-moz-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-o-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-ms-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
/*设置三帧让动画消失得更平缓*/
@keyframes fadeOut {
0% {opacity: 1}
60% {opacity: .9}
100% {opacity: 0}
}
@-webkit-keyframes fadeOut {
0% {opacity: 1}
60% {opacity: .9}
100% {opacity: 0}
}
@-moz-keyframes fadeOut {
0% {opacity: 1}
60% {opacity: .9}
100% {opacity: 0}
}
@-o-keyframes fadeOut {
0% {opacity: 1}
60% {opacity: .9}
100% {opacity: 0}
}
@-ms-keyframes fadeOut {
0% {opacity: 1}
60% {opacity: .9}
100% {opacity: 0}
}
.web-toast{
position: fixed;
background: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 14px;
line-height: 1;
padding:10px;
border-radius: 3px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
z-index: 9999;
white-space: nowrap;
}
/*时间稍微比一般的提示时间长*/
.fadeOut{
animation: fadeOut 1.2s;
}
.fadeIn{
animation:fadeIn .5s;
}
原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。
