最近寫的一個功能和拼多多的彈幕提示功能類似，依次顯現(xiàn)多個提示信息，效果圖如下：

在上篇文章中講到自定義toast的實現(xiàn):網(wǎng)頁自定義toast提示框，
因此這個功能只需要做一些改變即可
一：先定義一個數(shù)組，存放要顯示的信息

 var arr = ["A","B","C","D","E"]

二：循環(huán)數(shù)組調(diào)用封裝好的toast提示信息：

 for(var i = 0,l=arr.length;i<l;i++){
        webToastObj({
            message:"我是"+arr[i]+"，歡迎您",
            time:(i+1)*1500
        })
 }

注意這里的參數(shù)time(觸發(fā)提示時間)的小技巧，根據(jù)索引來確定每個數(shù)組元素應該正確出現(xiàn)的時間，越靠后的元素那么延遲觸發(fā)的時間越長，因此便形成了隊列。
三：webToastObj函數(shù)封裝如下，利用js動態(tài)生成元素并添加動畫，可參考上一篇文章的解釋(網(wǎng)頁自定義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);
    }

因此這里是在定時器里同時加入逐漸顯現(xiàn)（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;
        }

原文作者技術博客：http://www.itdecent.cn/u/ac4daaeecdfe
95后前端妹子一枚，愛閱讀，愛交友，將工作中遇到的問題記錄在這里，希望給每一個看到的你能帶來一點幫助。
歡迎留言交流。