制作常见的消息提示框

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



然后暂时停留若干时间，完毕后自动收缩。在线演示地址：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 则是消退时候的样式。

样式写的也非常简单，如果大家不太了解个别样式含义百度即可。