嗨叙谨，這里是芝麻，今天我們一塊來做一個(gè)“彈窗消息提醒”插件保屯。

彈窗消息演示

喏手负，就是這么一個(gè)效果。

1. 分析

1. 當(dāng)消息被觸發(fā)的時(shí)候姑尺，會(huì)有一個(gè)自上而下的淡入過程竟终。
2. 在持續(xù)了一段時(shí)間后會(huì)自動(dòng)的消失，或者是需要用戶來手動(dòng)的點(diǎn)擊關(guān)閉按鈕切蟋。
3. 在消息消失的時(shí)候统捶，會(huì)有一個(gè)自下而上的淡出過程。
4. 消息是可以疊加彈出的柄粹，最新的消息會(huì)排在消息列表的最后面喘鸟。
5. 當(dāng)前面的消息消失后，后面的消息會(huì)有一個(gè)向上滑動(dòng)效果镰惦。

然后消息本身是有三部分組成

1. 消息圖標(biāo)迷守，用來區(qū)分不同類型的消息。
2. 消息文本旺入。
3. 關(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" >
<link rel="stylesheet" href="./message.css">
<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;
}

大概是這么一個(gè)效果

初始效果

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è)move-in：

應(yīng)用動(dòng)畫

可以看到噩死，只需要在某個(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)了，如圖：

動(dòng)畫結(jié)束后的默認(rèn)狀態(tài)

所以animation-fill-mode: forwards;是為了讓動(dòng)畫結(jié)束后保持這個(gè)結(jié)束狀態(tài)，也就是不在顯示了堂鲜。

動(dòng)畫結(jié)束后保持結(jié)束狀態(tài)

4. 編寫js插件

那么栈雳，在寫js之前呢，我們先來思考一下泡嘴，如果你是插件的使用者甫恩，你想怎么來調(diào)用這個(gè)插件逆济？
我們的插件很簡(jiǎn)單酌予，就是在需要的時(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方法：

1. 創(chuàng)建一個(gè)消息節(jié)點(diǎn)抢蚀，并把它追加到message-container容器的末尾镀层。
2. 設(shè)定一個(gè)時(shí)間，在這個(gè)時(shí)間結(jié)束后自動(dòng)的將消息移除。
3. 監(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);
    }
}

消息被自動(dòng)移除

// 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);
    }
}

注意觀察dom樹的變化：

消失動(dòng)畫

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>

可手動(dòng)關(guān)閉的消息

其實(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è)消息呢。
很簡(jiǎn)單，各位自行實(shí)現(xiàn)吧倘屹！

看到這里你忍心不點(diǎn)個(gè)關(guān)注嗎银亲？?