<!-- message.html -->
 <!-- 這個css是我引用阿里的一些字體圖標(biāo)，請戳： https://www.iconfont.cn/ -->
<link rel="stylesheet" >
<link rel="stylesheet" href="./message.css" rel="external nofollow" >
<script src="./message.js"></script>
 <!-- 消息外層容器，因?yàn)橄⑻嵝鸦旧鲜侨值?，所以這里用id，所有的彈出消息都是需要插入到這個容器里邊的 -->
<div id="message-container">
 <div class="message">
 <!-- 消息圖標(biāo) icon icon-success對應(yīng)我的阿里字體圖標(biāo)的font-class -->
 <div class="type icon icon-success"></div>
 <!-- 消息文本 -->
 <div class="text">這是一條正經(jīng)的消息~</div>
 <!-- 關(guān)閉按鈕 -->
 <div class="close icon icon-close"></div>
 </div>
 <div class="message">
 <div class="type icon icon-error"></div>
 <div class="text">這是一條正經(jīng)的消息~</div>
 </div>
</div>
/* message.css */
 #message-container {
 position: fixed;
 left: 0;
 top: 0;
 right: 0;
 /* 采用flex彈性布局，讓容器內(nèi)部的所有消息可以水平居中，還能任意的調(diào)整寬度 */
 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;
 /* 讓消息內(nèi)部的三個元素（圖標(biāo)、文本、關(guān)閉按鈕）可以垂直水平居中 */
 display: flex;
 align-items: center;
}
#message-container .message .text {
 color: #333;
 padding: 0 20px 0 5px;
}
#message-container .message .close {
 cursor: pointer;
 color: #999;
}
 /* 給每個圖標(biāo)都加上不同的顏色，用來區(qū)分不同類型的消息 */
#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;
}

/* message.css */
 /* 這個動畫規(guī)則我們就叫做message-move-in吧，隨后我們會用animation屬性在某個元素上應(yīng)用這個動畫規(guī)則。 */
@keyframes message-move-in {
 0% {
 /* 前邊分析過了，彈出動畫是一個自上而下的淡入過程 */
 /* 所以在動畫初始狀態(tài)要把元素的不透明度設(shè)置為0，在動畫結(jié)束的時候再把不透明度設(shè)置1，這樣就會實(shí)現(xiàn)一個淡入動畫 */
 opacity: 0;
 /* 那么“自上而下”這個動畫可以用“transform”變換屬性結(jié)合他的“translateY”上下平移函數(shù)來完成 */
 /* translateY(-100%)表示動畫初始狀態(tài)，元素在實(shí)際位置上面“自身一個高度”的位置。 */
 transform: translateY(-100%);
 }
 100% {
 opacity: 1;
 /* 平移到自身位置 */
 transform: translateY(0);
 }
}

/* message.css */
 #message-container .message.move-in {
 /* animation屬性是用來加載某個動畫規(guī)則 請參考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation */
 animation: message-move-in 0.3s ease-in-out;
}

/* 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;
 /* 讓動畫結(jié)束后保持結(jié)束狀態(tài) */
 animation-fill-mode: forwards;
}

<!-- message.html -->
<!-- 省略... -->
 <script>
// message可以定義為全局對象，項(xiàng)目中可以直接調(diào)用。
const message = new Message();
message.show({
 type: 'success',
 text: '點(diǎn)個關(guān)注不迷路~'
});
</script>

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

/* message.js */
 class Message {
 /**
 * 構(gòu)造函數(shù)會在實(shí)例化的時候自動執(zhí)行
 */
 constructor() {
 const containerId = 'message-container';
 // 檢測下html中是否已經(jīng)有這個message-container元素
 this.containerEl = document.getElementById(containerId);
 if (!this.containerEl) {
 // 創(chuàng)建一個Element對象，也就是創(chuàng)建一個id為message-container的dom節(jié)點(diǎn)
 this.containerEl = document.createElement('div');
 this.containerEl.id = containerId;
 // 把message-container元素放在html的body末尾
 document.body.appendChild(this.containerEl);
 }
 }
 show({ type = 'info', text = '' }) {
 }
}

class Message {
 // 省略...
 show({ type = 'info', text = '' }) {
 // 創(chuàng)建一個Element對象
 let messageEl = document.createElement('div');
 // 設(shè)置消息class，這里加上move-in可以直接看到彈出效果
 messageEl.className = 'message move-in';
 // 消息內(nèi)部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屬性是我們在構(gòu)造函數(shù)中創(chuàng)建的message-container容器
 this.containerEl.appendChild(messageEl);
 }

<!-- message.html -->
<!-- 省略... -->
 <button class="btn">彈窗消息提醒</button>
 <script>
 // message可以定義為全局對象，項(xiàng)目中可以直接調(diào)用。
 const message = new Message();
 document.querySelector('.btn').addEventListener('click', () => {
 message.show({
 type: 'success',
 text: '點(diǎn)個關(guān)注不迷路~'
 });
 });
 </script>

// message.js
 class Message {
 // 省略...
 show({ type = 'info', text = '', duration = 2000 }) {
 // 省略...
 // 用setTimeout來做一個定時器
 setTimeout(() => {
 // Element對象內(nèi)部有一個remove方法，調(diào)用之后可以將該元素從dom樹種移除！
 messageEl.remove();
 }, duration);
 }
}

// 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';
 // 這個地方是監(jiān)聽動畫結(jié)束事件，在動畫結(jié)束后把消息從dom樹中移除。
 // 如果你是在增加move-out后直接調(diào)用messageEl.remove，那么你不會看到任何動畫效果
 messageEl.addEventListener('animationend', () => {
 // Element對象內(nèi)部有一個remove方法，調(diào)用之后可以將該元素從dom樹種移除！
 messageEl.remove();
 });
 }, duration);
 }
}

// message.js
 class Message {
 // 省略...
 show({ type = 'info', text = '', duration = 2000, closeable = false }) {
 // 創(chuàng)建一個Element對象
 let messageEl = document.createElement('div');
 // 設(shè)置消息class，這里加上move-in可以直接看到彈出效果
 messageEl.className = 'message move-in';
 // 消息內(nèi)部html字符串
 messageEl.innerHTML = `
 <span class="icon icon-${type}"></span>
 <div class="text">${text}</div>
 `;
 // 是否展示關(guān)閉按鈕
 if (closeable) {
 // 創(chuàng)建一個關(guān)閉按鈕
 let closeEl = document.createElement('div');
 closeEl.className = 'close icon icon-close';
 // 把關(guān)閉按鈕追加到message元素末尾
 messageEl.appendChild(closeEl);
 // 監(jiān)聽關(guān)閉按鈕的click事件，觸發(fā)后將調(diào)用我們的close方法
 // 我們把剛才寫的移除消息封裝為一個close方法
 closeEl.addEventListener('click', () => {
 this.close(messageEl)
 });
 }
 // 追加到message-container末尾
 // this.containerEl屬性是我們在構(gòu)造函數(shù)中創(chuàng)建的message-container容器
 this.containerEl.appendChild(messageEl);
 // 只有當(dāng)duration大于0的時候才設(shè)置定時器，這樣我們的消息就會一直顯示
 if (duration > 0) {
 // 用setTimeout來做一個定時器
 setTimeout(() => {
 this.close(messageEl);
 }, duration);
 } 
 }
 /**
 * 關(guān)閉某個消息
 * 由于定時器里邊要移除消息，然后用戶手動關(guān)閉事件也要移除消息，所以我們直接把移除消息提取出來封裝成一個方法
 * @param {Element} messageEl 
 */
 close(messageEl) {
 // 首先把move-in這個彈出動畫類給移除掉，要不然會有問題，可以自己測試下
 messageEl.className = messageEl.className.replace('move-in', '');
 // 增加一個move-out類
 messageEl.className += 'move-out';
 // 這個地方是監(jiān)聽動畫結(jié)束事件，在動畫結(jié)束后把消息從dom樹中移除。
 // 如果你是在增加move-out后直接調(diào)用messageEl.remove，那么你不會看到任何動畫效果
 messageEl.addEventListener('animationend', () => {
 // Element對象內(nèi)部有一個remove方法，調(diào)用之后可以將該元素從dom樹種移除！
 messageEl.remove();
 });
 }
}

<!-- message.html -->
<!-- 省略... -->
 <button class="btn">彈窗消息提醒</button>
 <script>
 // message可以定義為全局對象，項(xiàng)目中可以直接調(diào)用。
 const message = new Message();
 document.querySelector('.btn').addEventListener('click', () => {
 message.show({
 type: 'warning',
 text: '點(diǎn)我旁邊的叉叉試試',
 duration: 0, // 不會自動消失
 closeable: true, // 可手動關(guān)閉
 });
 });
 </script>

其實(shí)已經(jīng)寫的差不多了，不過還是有一些小問題，比如當(dāng)我們彈出兩個甚至更多消息的時候，如果前邊的消息消失后，下面的消息會直接跳到上面的位置，很僵硬，沒有任何的滑動。

我們可以通過css的transition屬性來讓meesage的高度逐漸變小，這樣下面的元素就會根據(jù)變化來逐漸上移。

/* 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;
 /* 讓消息內(nèi)部的三個元素（圖標(biāo)、文本、關(guān)閉按鈕）可以垂直水平居中 */
 display: flex;
 align-items: center;
/* 增加一個過渡屬性，當(dāng)message元素的高度和margin變化時候?qū)幸粋€過渡動畫 */
 transition: height 0.2s ease-in-out, margin 0.2s ease-in-out;
} 
/* 省略... */

 close(messageEl) {
 // 首先把move-in這個彈出動畫類給移除掉，要不然會有問題，可以自己測試下
 messageEl.className = messageEl.className.replace('move-in', '');
 // 增加一個move-out類
 messageEl.className += 'move-out';
 // move-out動畫結(jié)束后把元素的高度和邊距都設(shè)置為0
 // 由于我們在css中設(shè)置了transition屬性，所以會有一個過渡動畫
 messageEl.addEventListener('animationend', () => {
 messageEl.setAttribute('style', 'height: 0; margin: 0');
 });
 // 這個地方是監(jiān)聽transition的過渡動畫結(jié)束事件，在動畫結(jié)束后把消息從dom樹中移除。
 messageEl.addEventListener('transitionend', () => {
 // Element對象內(nèi)部有一個remove方法，調(diào)用之后可以將該元素從dom樹種移除！
 messageEl.remove();
 });
 }