如何用原生js写一个弹窗消息提醒插件


Posted in Javascript onMay 24, 2019

1.分析

当消息被触发的时候,会有一个自上而下的淡入过程。
在持续了一段时间后会自动的消失,或者是需要用户来手动的点击关闭按钮。
在消息消失的时候,会有一个自下而上的淡出过程。
消息是可以叠加弹出的,最新的消息会排在消息列表的最后面。
当前面的消息消失后,后面的消息会有一个向上滑动效果。
然后消息本身是有三部分组成

消息图标,用来区分不同类型的消息。
消息文本。
关闭按钮,并不是所有消息都需要关闭按钮。

2. 实现样式

那么,不管我们是用原生js还是vue,首先呢,我们都需要把这个消息的基本样式给写出来,然后再通过js来控制消息的弹出和关闭。
所以,我们先来写html和css。

<!-- message.html -->
 <!-- 这个css是我引用阿里的一些字体图标,请戳: https://www.iconfont.cn/ -->
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1117508_wxidm5ry7od.css">
<link rel="stylesheet" href="./message.css" rel="external nofollow" >
<script src="./message.js"></script>
 <!-- 消息外层容器,因为消息提醒基本上是全局的,所以这里用id,所有的弹出消息都是需要插入到这个容器里边的 -->
<div id="message-container">
 <div class="message">
 <!-- 消息图标 icon icon-success对应我的阿里字体图标的font-class -->
 <div class="type icon icon-success"></div>
 <!-- 消息文本 -->
 <div class="text">这是一条正经的消息~</div>
 <!-- 关闭按钮 -->
 <div class="close icon icon-close"></div>
 </div>
 <div class="message">
 <div class="type icon icon-error"></div>
 <div class="text">这是一条正经的消息~</div>
 </div>
</div>
/* message.css */
 #message-container {
 position: fixed;
 left: 0;
 top: 0;
 right: 0;
 /* 采用flex弹性布局,让容器内部的所有消息可以水平居中,还能任意的调整宽度 */
 display: flex;
 flex-direction: column;
 align-items: center;
}
#message-container .message {
 background: #fff;
 margin: 10px 0;
 padding: 0 10px;
 height: 40px;
 box-shadow: 0 0 10px 0 #eee;
 font-size: 14px;
 border-radius: 3px;
 /* 让消息内部的三个元素(图标、文本、关闭按钮)可以垂直水平居中 */
 display: flex;
 align-items: center;
}
#message-container .message .text {
 color: #333;
 padding: 0 20px 0 5px;
}
#message-container .message .close {
 cursor: pointer;
 color: #999;
}
 /* 给每个图标都加上不同的颜色,用来区分不同类型的消息 */
#message-container .message .icon-info {
 color: #0482f8;
}
#message-container .message .icon-error {
 color: #f83504;
}
#message-container .message .icon-success {
 color: #06a35a;
}
#message-container .message .icon-warning {
 color: #ceca07;
}
#message-container .message .icon-loading {
 color: #0482f8;
}

3. 实现动画

接下来要做的就是这个消息的弹出和消失动画,我们还是用css来实现。

想要在css里边实现自定义的动画,首先需要用@keyframes来定义一个动画规则,然后再通过animation属性把动画应用到某个元素上就可以了。
所谓的动画规则其实就是一个动画序列,或者可以理解为一个个的关键帧,而关键帧的内部就是你想改变的css属性,你可以在关键帧里边写上几乎任何的css属性,当动画被应用的时候,这些css属性就会根据各个关键帧做出相应的变换。

那我们先用@keyframes来写一个动画规则吧

/* message.css */
 /* 这个动画规则我们就叫做message-move-in吧,随后我们会用animation属性在某个元素上应用这个动画规则。 */
@keyframes message-move-in {
 0% {
 /* 前边分析过了,弹出动画是一个自上而下的淡入过程 */
 /* 所以在动画初始状态要把元素的不透明度设置为0,在动画结束的时候再把不透明度设置1,这样就会实现一个淡入动画 */
 opacity: 0;
 /* 那么“自上而下”这个动画可以用“transform”变换属性结合他的“translateY”上下平移函数来完成 */
 /* translateY(-100%)表示动画初始状态,元素在实际位置上面“自身一个高度”的位置。 */
 transform: translateY(-100%);
 }
 100% {
 opacity: 1;
 /* 平移到自身位置 */
 transform: translateY(0);
 }
}

然后我们再定义一个和message元素同级的类move-in,把message-move-in这个动画规则给应用到move-in类上,这样我们需要让哪个消息弹出,就只需要在消息的类上加一个move-in就行。

/* message.css */
 #message-container .message.move-in {
 /* animation属性是用来加载某个动画规则 请参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation */
 animation: message-move-in 0.3s ease-in-out;
}

可以看到,只需要在某个message上追加一个move-in就能实现弹出动画。
那么,消失动画也是一个套路,只不过跟弹出动画反过来而已。

/* message.css */
 @keyframes message-move-out {
 0% {
 opacity: 1;
 transform: translateY(0);
 }
 100% {
 opacity: 0;
 transform: translateY(-100%);
 }
}
 #message-container .message.move-out {
 animation: message-move-out 0.3s ease-in-out;
 /* 让动画结束后保持结束状态 */
 animation-fill-mode: forwards;
}

animation-fill-mode: forwards;这个是干嘛的呢?因为动画结束后默认会回到元素的最初状态,在这里表现的是消失后又出现了。 

所以animation-fill-mode: forwards;是为了让动画结束后保持这个结束状态,也就是不在显示了。

4. 编写js插件

那么,在写js之前呢,我们先来思考一下,如果你是插件的使用者,你想怎么来调用这个插件?
我们的插件很简单,就是在需要的时候弹出一个消息,假设插件他提供给我们的是一个类,就叫做Message吧,并且他内部有一个show方法,那么只要使用者实例化这个类后,调用他的show方法,然后传入不同的参数就可以弹出一个消息了。而且我们所实例化的对象可以是全局唯一的。

<!-- message.html -->
<!-- 省略... -->
 <script>
// message可以定义为全局对象,项目中可以直接调用。
const message = new Message();
message.show({
 type: 'success',
 text: '点个关注不迷路~'
});
</script>

所以呢,我们要先写一个Message类,并且必须要实现一个show方法。

/* message.js */
 class Message {
 constructor() {
 }
 show({ type = 'info', text = '' }) {
 }
}

这里我直接用了es6的class关键词,其实他的内部还是原型链的形式。用class呢,可以让我们更直观的了解这个类。

根据我们在第一部分的分析,所有的消息元素都是需要在js中创建的,所以我们不需要使用者来写任何html代码,那么我们只需要在对象被实例化new Message()的时候,就去创建消息容器message-container,后续在调用show方法时候,直接把消息插入到message-container内部即可。

/* message.js */
 class Message {
 /**
 * 构造函数会在实例化的时候自动执行
 */
 constructor() {
 const containerId = 'message-container';
 // 检测下html中是否已经有这个message-container元素
 this.containerEl = document.getElementById(containerId);
 if (!this.containerEl) {
 // 创建一个Element对象,也就是创建一个id为message-container的dom节点
 this.containerEl = document.createElement('div');
 this.containerEl.id = containerId;
 // 把message-container元素放在html的body末尾
 document.body.appendChild(this.containerEl);
 }
 }
 show({ type = 'info', text = '' }) {
 }
}

这样,我们调用const message = new Message()的时候会在dom中自动的插入一个message-container节点。
那么,最重要的还是我们的show方法:

创建一个消息节点,并把它追加到message-container容器的末尾。
设定一个时间,在这个时间结束后自动的将消息移除。
监听“关闭按钮”的click事件,来让用户可以手动的移除消息。
我们一步一步来。

4.1 创建一个消息节点,并把它追加到message-container容器的末尾。

class Message {
 // 省略...
 show({ type = 'info', text = '' }) {
 // 创建一个Element对象
 let messageEl = document.createElement('div');
 // 设置消息class,这里加上move-in可以直接看到弹出效果
 messageEl.className = 'message move-in';
 // 消息内部html字符串
 messageEl.innerHTML = `
 <span class="icon icon-${type}"></span>
 <div class="text">${text}</div>
 <div class="close icon icon-close"></div>
 `;
 // 追加到message-container末尾
 // this.containerEl属性是我们在构造函数中创建的message-container容器
 this.containerEl.appendChild(messageEl);
 }

我们来调用下试试~

<!-- message.html -->
<!-- 省略... -->
 <button class="btn">弹窗消息提醒</button>
 <script>
 // message可以定义为全局对象,项目中可以直接调用。
 const message = new Message();
 document.querySelector('.btn').addEventListener('click', () => {
 message.show({
 type: 'success',
 text: '点个关注不迷路~'
 });
 });
 </script>

4.2 设定一个时间,在这个时间结束后自动的将消息移除。

// message.js
 class Message {
 // 省略...
 show({ type = 'info', text = '', duration = 2000 }) {
 // 省略...
 // 用setTimeout来做一个定时器
 setTimeout(() => {
 // Element对象内部有一个remove方法,调用之后可以将该元素从dom树种移除!
 messageEl.remove();
 }, duration);
 }
}

 可以看到,消息在过了2秒后,自动的从dom树中移除了,不过呢并没有动画,还记得前边我们写了move-out类吗?这个类和message是同级的。现在我们只需要在定时结束后把这个类应用到message元素上就行。

// message.js
 class Message {
 // 省略...
 show({ type = 'info', text = '', duration = 2000 }) {
 // 省略...
 // 用setTimeout来做一个定时器
 setTimeout(() => { // 首先把move-in这个弹出动画类给移除掉,要不然会有问题,可以自己测试下
 messageEl.className = messageEl.className.replace('move-in', ''); // 增加一个move-out类
 messageEl.className += 'move-out';
 // 这个地方是监听动画结束事件,在动画结束后把消息从dom树中移除。
 // 如果你是在增加move-out后直接调用messageEl.remove,那么你不会看到任何动画效果
 messageEl.addEventListener('animationend', () => {
 // Element对象内部有一个remove方法,调用之后可以将该元素从dom树种移除!
 messageEl.remove();
 });
 }, duration);
 }
}

4.3 监听“关闭按钮”的click事件,来让用户可以手动的移除消息。

有时候呢,我们希望消息能够一直展示,直到用户来手动的关闭掉,那么首先我们要加一个参数,用来控制是否展示这个关闭按钮。

// message.js
 class Message {
 // 省略...
 show({ type = 'info', text = '', duration = 2000, closeable = false }) {
 // 创建一个Element对象
 let messageEl = document.createElement('div');
 // 设置消息class,这里加上move-in可以直接看到弹出效果
 messageEl.className = 'message move-in';
 // 消息内部html字符串
 messageEl.innerHTML = `
 <span class="icon icon-${type}"></span>
 <div class="text">${text}</div>
 `;
 // 是否展示关闭按钮
 if (closeable) {
 // 创建一个关闭按钮
 let closeEl = document.createElement('div');
 closeEl.className = 'close icon icon-close';
 // 把关闭按钮追加到message元素末尾
 messageEl.appendChild(closeEl);
 // 监听关闭按钮的click事件,触发后将调用我们的close方法
 // 我们把刚才写的移除消息封装为一个close方法
 closeEl.addEventListener('click', () => {
 this.close(messageEl)
 });
 }
 // 追加到message-container末尾
 // this.containerEl属性是我们在构造函数中创建的message-container容器
 this.containerEl.appendChild(messageEl);
 // 只有当duration大于0的时候才设置定时器,这样我们的消息就会一直显示
 if (duration > 0) {
 // 用setTimeout来做一个定时器
 setTimeout(() => {
 this.close(messageEl);
 }, duration);
 } 
 }
 /**
 * 关闭某个消息
 * 由于定时器里边要移除消息,然后用户手动关闭事件也要移除消息,所以我们直接把移除消息提取出来封装成一个方法
 * @param {Element} messageEl 
 */
 close(messageEl) {
 // 首先把move-in这个弹出动画类给移除掉,要不然会有问题,可以自己测试下
 messageEl.className = messageEl.className.replace('move-in', '');
 // 增加一个move-out类
 messageEl.className += 'move-out';
 // 这个地方是监听动画结束事件,在动画结束后把消息从dom树中移除。
 // 如果你是在增加move-out后直接调用messageEl.remove,那么你不会看到任何动画效果
 messageEl.addEventListener('animationend', () => {
 // Element对象内部有一个remove方法,调用之后可以将该元素从dom树种移除!
 messageEl.remove();
 });
 }
}
我们来调用下试试~
<!-- message.html -->
<!-- 省略... -->
 <button class="btn">弹窗消息提醒</button>
 <script>
 // message可以定义为全局对象,项目中可以直接调用。
 const message = new Message();
 document.querySelector('.btn').addEventListener('click', () => {
 message.show({
 type: 'warning',
 text: '点我旁边的叉叉试试',
 duration: 0, // 不会自动消失
 closeable: true, // 可手动关闭
 });
 });
 </script>

其实已经写的差不多了,不过还是有一些小问题,比如当我们弹出两个甚至更多消息的时候,如果前边的消息消失后,下面的消息会直接跳到上面的位置,很僵硬,没有任何的滑动。

我们可以通过css的transition属性来让meesage的高度逐渐变小,这样下面的元素就会根据变化来逐渐上移。

/* message.css */
/* 省略... */
 #message-container .message {
 background: #fff;
 margin: 10px 0;
 padding: 0 10px;
 height: 40px;
 box-shadow: 0 0 10px 0 #ccc;
 font-size: 14px;
 border-radius: 3px;
 /* 让消息内部的三个元素(图标、文本、关闭按钮)可以垂直水平居中 */
 display: flex;
 align-items: center;
/* 增加一个过渡属性,当message元素的高度和margin变化时候将会有一个过渡动画 */
 transition: height 0.2s ease-in-out, margin 0.2s ease-in-out;
} 
/* 省略... */
然后我们只需要在Message类的close方法中做一下改变:
close(messageEl) {
 // 首先把move-in这个弹出动画类给移除掉,要不然会有问题,可以自己测试下
 messageEl.className = messageEl.className.replace('move-in', '');
 // 增加一个move-out类
 messageEl.className += 'move-out';
 // move-out动画结束后把元素的高度和边距都设置为0
 // 由于我们在css中设置了transition属性,所以会有一个过渡动画
 messageEl.addEventListener('animationend', () => {
 messageEl.setAttribute('style', 'height: 0; margin: 0');
 });
 // 这个地方是监听transition的过渡动画结束事件,在动画结束后把消息从dom树中移除。
 messageEl.addEventListener('transitionend', () => {
 // Element对象内部有一个remove方法,调用之后可以将该元素从dom树种移除!
 messageEl.remove();
 });
 }

结尾
好了,基本上已经写好了,不过为了各个浏览器的兼容性,建议大家用babel转码,如果想发布,可以用webpack把js和css一块打包。
不过我们还是少考虑了一个场景,现在的关闭消息都是对象内部调用close方法来实现,如果我们希望外部能够控制消息的关闭呢,比如我请求服务器时候弹出一个loading的消息,现在服务器返回数据后,我怎么来关闭这个消息呢。
很简单,各位自行实现吧!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js获得地址栏?问号后参数的方法
Aug 08 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
浅谈vue中数据双向绑定的实现原理
Sep 14 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
laydate时间日历插件使用方法详解
Nov 14 Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
小程序登录/注册页面设计的实现代码
May 24 #Javascript
微信小程序+云开发实现欢迎登录注册
May 24 #Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 #Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 #Javascript
JS实现判断数组是否包含某个元素示例
May 24 #Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 #Javascript
jQuery中使用validate插件校验表单功能
May 24 #jQuery
You might like
落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
php 采集书并合成txt格式的实现代码
2009/03/01 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
详解js的六大数据类型
2016/12/27 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
详解Python多线程
2016/11/14 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
python 基于wx实现音乐播放
2020/11/24 Python
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
小车司机岗位职责
2013/11/25 职场文书
汽车技术服务英文求职信范文
2014/01/02 职场文书
2014社区三八妇女节活动总结
2014/03/01 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
理财学专业自荐书
2014/06/28 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
Python爬取某拍短视频
2021/06/11 Python
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python