1.分析
當(dāng)消息被觸發(fā)的時(shí)候，會(huì)有一個(gè)自上而下的淡入過程。
在持續(xù)了一段時(shí)間后會(huì)自動(dòng)的消失，或者是需要用戶來手動(dòng)的點(diǎn)擊關(guān)閉按鈕。
在消息消失的時(shí)候，會(huì)有一個(gè)自下而上的淡出過程。
消息是可以疊加彈出的，最新的消息會(huì)排在消息列表的最后面。
當(dāng)前面的消息消失后，后面的消息會(huì)有一個(gè)向上滑動(dòng)效果。
然后消息本身是有三部分組成
消息圖標(biāo)，用來區(qū)分不同類型的消息。
消息文本。
關(guān)閉按鈕，并不是所有消息都需要關(guān)閉按鈕。
2. 實(shí)現(xiàn)樣式
那么，不管我們是用原生js還是vue，首先呢，我們都需要把這個(gè)消息的基本樣式給寫出來，然后再通過js來控制消息的彈出和關(guān)閉。
所以，我們先來寫html和css。
<!-- message.html --> <!-- 這個(gè)css是我引用阿里的一些字體圖標(biāo)，請(qǐng)戳： 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> <!-- 消息外層容器，因?yàn)橄⑻嵝鸦旧鲜侨值模赃@里用id，所有的彈出消息都是需要插入到這個(gè)容器里邊的 --><div id="message-container"> <div class="message"> <!-- 消息圖標(biāo) icon icon-success對(duì)應(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)部的三個(gè)元素（圖標(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;} /* 給每個(gè)圖標(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;}3. 實(shí)現(xiàn)動(dòng)畫
接下來要做的就是這個(gè)消息的彈出和消失動(dòng)畫，我們還是用css來實(shí)現(xiàn)。
想要在css里邊實(shí)現(xiàn)自定義的動(dòng)畫，首先需要用@keyframes來定義一個(gè)動(dòng)畫規(guī)則，然后再通過animation屬性把動(dòng)畫應(yīng)用到某個(gè)元素上就可以了。
所謂的動(dòng)畫規(guī)則其實(shí)就是一個(gè)動(dòng)畫序列，或者可以理解為一個(gè)個(gè)的關(guān)鍵幀，而關(guān)鍵幀的內(nèi)部就是你想改變的css屬性，你可以在關(guān)鍵幀里邊寫上幾乎任何的css屬性，當(dāng)動(dòng)畫被應(yīng)用的時(shí)候，這些css屬性就會(huì)根據(jù)各個(gè)關(guān)鍵幀做出相應(yīng)的變換。
那我們先用@keyframes來寫一個(gè)動(dòng)畫規(guī)則吧
/* message.css */ /* 這個(gè)動(dòng)畫規(guī)則我們就叫做message-move-in吧，隨后我們會(huì)用animation屬性在某個(gè)元素上應(yīng)用這個(gè)動(dòng)畫規(guī)則。 */@keyframes message-move-in { 0% { /* 前邊分析過了，彈出動(dòng)畫是一個(gè)自上而下的淡入過程 */ /* 所以在動(dòng)畫初始狀態(tài)要把元素的不透明度設(shè)置為0，在動(dòng)畫結(jié)束的時(shí)候再把不透明度設(shè)置1，這樣就會(huì)實(shí)現(xiàn)一個(gè)淡入動(dòng)畫 */ opacity: 0; /* 那么“自上而下”這個(gè)動(dòng)畫可以用“transform”變換屬性結(jié)合他的“translateY”上下平移函數(shù)來完成 */ /* translateY(-100%)表示動(dòng)畫初始狀態(tài)，元素在實(shí)際位置上面“自身一個(gè)高度”的位置。 */ transform: translateY(-100%); } 100% { opacity: 1; /* 平移到自身位置 */ transform: translateY(0); }}然后我們?cè)俣x一個(gè)和message元素同級(jí)的類move-in，把message-move-in這個(gè)動(dòng)畫規(guī)則給應(yīng)用到move-in類上，這樣我們需要讓哪個(gè)消息彈出，就只需要在消息的類上加一個(gè)move-in就行。
/* message.css */ #message-container .message.move-in { /* animation屬性是用來加載某個(gè)動(dòng)畫規(guī)則 請(qǐng)參考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation */ animation: message-move-in 0.3s ease-in-out;} 可以看到，只需要在某個(gè)message上追加一個(gè)move-in就能實(shí)現(xiàn)彈出動(dòng)畫。
那么，消失動(dòng)畫也是一個(gè)套路，只不過跟彈出動(dòng)畫反過來而已。
/* 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; /* 讓動(dòng)畫結(jié)束后保持結(jié)束狀態(tài) */ animation-fill-mode: forwards;}animation-fill-mode: forwards;這個(gè)是干嘛的呢？因?yàn)閯?dòng)畫結(jié)束后默認(rèn)會(huì)回到元素的最初狀態(tài)，在這里表現(xiàn)的是消失后又出現(xiàn)了。
所以animation-fill-mode: forwards;是為了讓動(dòng)畫結(jié)束后保持這個(gè)結(jié)束狀態(tài)，也就是不在顯示了。
4. 編寫js插件
那么，在寫js之前呢，我們先來思考一下，如果你是插件的使用者，你想怎么來調(diào)用這個(gè)插件？
我們的插件很簡單，就是在需要的時(shí)候彈出一個(gè)消息，假設(shè)插件他提供給我們的是一個(gè)類，就叫做Message吧，并且他內(nèi)部有一個(gè)show方法，那么只要使用者實(shí)例化這個(gè)類后，調(diào)用他的show方法，然后傳入不同的參數(shù)就可以彈出一個(gè)消息了。而且我們所實(shí)例化的對(duì)象可以是全局唯一的。
<!-- message.html --><!-- 省略... --> <script>// message可以定義為全局對(duì)象，項(xiàng)目中可以直接調(diào)用。const message = new Message();message.show({ type: 'success', text: '點(diǎn)個(gè)關(guān)注不迷路~'});</script>所以呢，我們要先寫一個(gè)Message類，并且必須要實(shí)現(xiàn)一個(gè)show方法。
/* message.js */ class Message { constructor() { } show({ type = 'info', text = '' }) { }}這里我直接用了es6的class關(guān)鍵詞，其實(shí)他的內(nèi)部還是原型鏈的形式。用class呢，可以讓我們更直觀的了解這個(gè)類。
根據(jù)我們?cè)诘谝徊糠值姆治觯械南⒃囟际切枰趈s中創(chuàng)建的，所以我們不需要使用者來寫任何html代碼，那么我們只需要在對(duì)象被實(shí)例化new Message()的時(shí)候，就去創(chuàng)建消息容器message-container，后續(xù)在調(diào)用show方法時(shí)候，直接把消息插入到message-container內(nèi)部即可。
/* message.js */ class Message { /** * 構(gòu)造函數(shù)會(huì)在實(shí)例化的時(shí)候自動(dòng)執(zhí)行 */ constructor() { const containerId = 'message-container'; // 檢測(cè)下html中是否已經(jīng)有這個(gè)message-container元素 this.containerEl = document.getElementById(containerId); if (!this.containerEl) { // 創(chuàng)建一個(gè)Element對(duì)象，也就是創(chuàng)建一個(gè)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 = '' }) { }} 這樣，我們調(diào)用const message = new Message()的時(shí)候會(huì)在dom中自動(dòng)的插入一個(gè)message-container節(jié)點(diǎn)。
那么，最重要的還是我們的show方法：
創(chuàng)建一個(gè)消息節(jié)點(diǎn)，并把它追加到message-container容器的末尾。
設(shè)定一個(gè)時(shí)間，在這個(gè)時(shí)間結(jié)束后自動(dòng)的將消息移除。
監(jiān)聽“關(guān)閉按鈕”的click事件，來讓用戶可以手動(dòng)的移除消息。
我們一步一步來。
4.1 創(chuàng)建一個(gè)消息節(jié)點(diǎn)，并把它追加到message-container容器的末尾。
class Message { // 省略... show({ type = 'info', text = '' }) { // 創(chuàng)建一個(gè)Element對(duì)象 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屬性是我們?cè)跇?gòu)造函數(shù)中創(chuàng)建的message-container容器 this.containerEl.appendChild(messageEl); }我們來調(diào)用下試試~
<!-- message.html --><!-- 省略... --> <button class="btn">彈窗消息提醒</button> <script> // message可以定義為全局對(duì)象，項(xiàng)目中可以直接調(diào)用。 const message = new Message(); document.querySelector('.btn').addEventListener('click', () => { message.show({ type: 'success', text: '點(diǎn)個(gè)關(guān)注不迷路~' }); }); </script>4.2 設(shè)定一個(gè)時(shí)間，在這個(gè)時(shí)間結(jié)束后自動(dòng)的將消息移除。
// message.js class Message { // 省略... show({ type = 'info', text = '', duration = 2000 }) { // 省略... // 用setTimeout來做一個(gè)定時(shí)器 setTimeout(() => { // Element對(duì)象內(nèi)部有一個(gè)remove方法，調(diào)用之后可以將該元素從dom樹種移除！ messageEl.remove(); }, duration); }}可以看到，消息在過了2秒后，自動(dòng)的從dom樹中移除了，不過呢并沒有動(dòng)畫，還記得前邊我們寫了move-out類嗎？這個(gè)類和message是同級(jí)的。現(xiàn)在我們只需要在定時(shí)結(jié)束后把這個(gè)類應(yīng)用到message元素上就行。
// message.js class Message { // 省略... show({ type = 'info', text = '', duration = 2000 }) { // 省略... // 用setTimeout來做一個(gè)定時(shí)器 setTimeout(() => { // 首先把move-in這個(gè)彈出動(dòng)畫類給移除掉，要不然會(huì)有問題，可以自己測(cè)試下 messageEl.className = messageEl.className.replace('move-in', ''); // 增加一個(gè)move-out類 messageEl.className += 'move-out'; // 這個(gè)地方是監(jiān)聽動(dòng)畫結(jié)束事件，在動(dòng)畫結(jié)束后把消息從dom樹中移除。 // 如果你是在增加move-out后直接調(diào)用messageEl.remove，那么你不會(huì)看到任何動(dòng)畫效果 messageEl.addEventListener('animationend', () => { // Element對(duì)象內(nèi)部有一個(gè)remove方法，調(diào)用之后可以將該元素從dom樹種移除！ messageEl.remove(); }); }, duration); }}4.3 監(jiān)聽“關(guān)閉按鈕”的click事件，來讓用戶可以手動(dòng)的移除消息。
有時(shí)候呢，我們希望消息能夠一直展示，直到用戶來手動(dòng)的關(guān)閉掉，那么首先我們要加一個(gè)參數(shù)，用來控制是否展示這個(gè)關(guān)閉按鈕。
// message.js class Message { // 省略... show({ type = 'info', text = '', duration = 2000, closeable = false }) { // 創(chuàng)建一個(gè)Element對(duì)象 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)建一個(gè)關(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方法 // 我們把剛才寫的移除消息封裝為一個(gè)close方法 closeEl.addEventListener('click', () => { this.close(messageEl) }); } // 追加到message-container末尾 // this.containerEl屬性是我們?cè)跇?gòu)造函數(shù)中創(chuàng)建的message-container容器 this.containerEl.appendChild(messageEl); // 只有當(dāng)duration大于0的時(shí)候才設(shè)置定時(shí)器，這樣我們的消息就會(huì)一直顯示 if (duration > 0) { // 用setTimeout來做一個(gè)定時(shí)器 setTimeout(() => { this.close(messageEl); }, duration); } } /** * 關(guān)閉某個(gè)消息 * 由于定時(shí)器里邊要移除消息，然后用戶手動(dòng)關(guān)閉事件也要移除消息，所以我們直接把移除消息提取出來封裝成一個(gè)方法 * @param {Element} messageEl */ close(messageEl) { // 首先把move-in這個(gè)彈出動(dòng)畫類給移除掉，要不然會(huì)有問題，可以自己測(cè)試下 messageEl.className = messageEl.className.replace('move-in', ''); // 增加一個(gè)move-out類 messageEl.className += 'move-out'; // 這個(gè)地方是監(jiān)聽動(dòng)畫結(jié)束事件，在動(dòng)畫結(jié)束后把消息從dom樹中移除。 // 如果你是在增加move-out后直接調(diào)用messageEl.remove，那么你不會(huì)看到任何動(dòng)畫效果 messageEl.addEventListener('animationend', () => { // Element對(duì)象內(nèi)部有一個(gè)remove方法，調(diào)用之后可以將該元素從dom樹種移除！ messageEl.remove(); }); }} 我們來調(diào)用下試試~<!-- message.html --><!-- 省略... --> <button class="btn">彈窗消息提醒</button> <script> // message可以定義為全局對(duì)象，項(xiàng)目中可以直接調(diào)用。 const message = new Message(); document.querySelector('.btn').addEventListener('click', () => { message.show({ type: 'warning', text: '點(diǎn)我旁邊的叉叉試試', duration: 0, // 不會(huì)自動(dòng)消失 closeable: true, // 可手動(dòng)關(guān)閉 }); }); </script> 其實(shí)已經(jīng)寫的差不多了，不過還是有一些小問題，比如當(dāng)我們彈出兩個(gè)甚至更多消息的時(shí)候，如果前邊的消息消失后，下面的消息會(huì)直接跳到上面的位置，很僵硬，沒有任何的滑動(dòng)。
我們可以通過css的transition屬性來讓meesage的高度逐漸變小，這樣下面的元素就會(huì)根據(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)部的三個(gè)元素（圖標(biāo)、文本、關(guān)閉按鈕）可以垂直水平居中 */ display: flex; align-items: center;/* 增加一個(gè)過渡屬性，當(dāng)message元素的高度和margin變化時(shí)候?qū)?huì)有一個(gè)過渡動(dòng)畫 */ transition: height 0.2s ease-in-out, margin 0.2s ease-in-out;} /* 省略... */ 然后我們只需要在Message類的close方法中做一下改變： close(messageEl) { // 首先把move-in這個(gè)彈出動(dòng)畫類給移除掉，要不然會(huì)有問題，可以自己測(cè)試下 messageEl.className = messageEl.className.replace('move-in', ''); // 增加一個(gè)move-out類 messageEl.className += 'move-out'; // move-out動(dòng)畫結(jié)束后把元素的高度和邊距都設(shè)置為0 // 由于我們?cè)赾ss中設(shè)置了transition屬性，所以會(huì)有一個(gè)過渡動(dòng)畫 messageEl.addEventListener('animationend', () => { messageEl.setAttribute('style', 'height: 0; margin: 0'); }); // 這個(gè)地方是監(jiān)聽transition的過渡動(dòng)畫結(jié)束事件，在動(dòng)畫結(jié)束后把消息從dom樹中移除。 messageEl.addEventListener('transitionend', () => { // Element對(duì)象內(nèi)部有一個(gè)remove方法，調(diào)用之后可以將該元素從dom樹種移除！ messageEl.remove(); }); } 結(jié)尾
好了，基本上已經(jīng)寫好了，不過為了各個(gè)瀏覽器的兼容性，建議大家用babel轉(zhuǎn)碼，如果想發(fā)布，可以用webpack把js和css一塊打包。
不過我們還是少考慮了一個(gè)場(chǎng)景，現(xiàn)在的關(guān)閉消息都是對(duì)象內(nèi)部調(diào)用close方法來實(shí)現(xiàn)，如果我們希望外部能夠控制消息的關(guān)閉呢，比如我請(qǐng)求服務(wù)器時(shí)候彈出一個(gè)loading的消息，現(xiàn)在服務(wù)器返回?cái)?shù)據(jù)后，我怎么來關(guān)閉這個(gè)消息呢。
很簡單，各位自行實(shí)現(xiàn)吧！
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
