制作常见的消息提示框

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhangxin09/article/details/79156982

该控件的效果是从页面右上方徐徐显示出一个消息框，如下图所示。

然后暂时停留若干时间，完毕后自动收缩。在线演示地址：https://framework.ajaxjs.com/framework/ui_demo/form/msg.jsp

首先，了解 HTML 结构如下：

<div class="topMsg">暮從碧山下，山月随人歸。卻顧所來徑，蒼蒼橫翠微。相攜及田家，童稚開荊扉。綠竹入幽徑，青蘿拂行衣。</div>
<button onclick="show();return false;">show</button>
<button onclick="show('保存成功！');return false;">show with text</button>

按钮点击之后就执行 show() 方法显示消息框。show() 是一个只有 11 行的 js 函数：

function show(text, showTime){
    var el = document.querySelector('.topMsg');
    if(text)
        el.innerHTML = text;
    el.classList.remove('fadeOut');
    el.classList.add('fadeIn');

    setTimeout(function(){
        el.classList.remove('fadeIn');
        el.classList.add('fadeOut');
    }, showTime || 3000)
}

可见，该函数非常简单，只是设置一下要显示的文字，和修改相关样式。样式是重头戏，动画效果都是 CSS 来完成。由于笔者习惯 LESS，故 CSS 乃 LESS 写就。

// 首先定义关键帧动画，一个显示、一个隐藏的
@keyframes topMsg-fade-in {
    0% {
        opacity: 0;
    }
    30% {
        opacity: .2;
    }
    80% {
        opacity: .4;
    }
    100% {
        opacity: 1;
    }
}
@keyframes topMsg-fade-out {
    0% {
    }
    30% {
        opacity: .2;
    }
    80% {
        opacity: .4;
    }
    100% {
        opacity: 0;
    }
}

// 元素样式，采用绝对布局
.topMsg{
    position:fixed;
    width:300px;
    height:80px;
    right: 30px;
    padding:10px;
    border-radius:5px;
    color: #0066cc;
    box-sizing: border-box;
    background-color: #f5faff;
    border:1px solid #0066cc;
    top: -100px;
    transition: top ease-in 550ms;
    animation-fill-mode: forwards;
    &.fadeIn{
        top: 100px;
        animation: topMsg-fade-in ease-in 550ms;
    }
    &.fadeOut{
        animation: topMsg-fade-out ease-out 550ms;
    }
}

注意 &.fadeIn 表示一个元素同时拥有这两个样式，等于 .topMsg.fadeIn 的 CSS 写法（中间没有空格）；若 HTML 表示的话便是

<div class="topMsg fadeIn">

fadeIn 对应显示时的样式，反之 fadeOut 则是消退时候的样式。
样式写的也非常简单，如果大家不太了解个别样式含义百度即可。