仿拼多多拼单成功的弹幕队列消息提示

 

 

 

最近写的一个功能和拼多多的弹幕提示功能类似，依次显现多个提示信息，效果图如下：

 

 

 

在上篇文章中讲到自定义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后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。