support multiple notices

.eslintrc

@@ -22,7 +22,7 @@
         "comma-style": 1,
         "func-call-spacing": 1,
         "keyword-spacing": 1,
-        "linebreak-style": 1,
+        "linebreak-style": 0,
         "no-multiple-empty-lines": 1,
         "space-infix-ops": 1,
         "arrow-spacing": 1,

src/css/notice.scss

@@ -1,14 +1,53 @@
-.dplayer-notice {
-    opacity: 0;
+.dplayer-notice-list{
     position: absolute;
     bottom: 60px;
     left: 20px;
-    font-size: 14px;
-    border-radius: 2px;
-    background: rgba(28, 28, 28, 0.9);
-    padding: 7px 20px;
-    transition: all .3s ease-in-out;
-    overflow: hidden;
-    color: #fff;
-    pointer-events: none;
-}
+
+    .dplayer-notice {
+        border-radius: 2px;
+        background: rgba(28, 28, 28, 0.9);
+        transition: all .3s ease-in-out;
+        overflow: hidden;
+        color: #fff;
+        display: table;
+        pointer-events: none;
+        animation: showNotice .3s ease 1 forwards;
+    }
+
+    .remove-notice{
+        animation: removeNotice .3s ease 1 forwards;
+    }
+}
+
+@keyframes showNotice {
+    from {
+        padding: 0;
+        font-size: 0;
+        margin-top: 0;
+    }
+    to {
+        padding: 7px 20px;
+        font-size: 14px;
+        margin-top: 5px;
+    }
+}
+
+@keyframes removeNotice {
+    0%{
+        padding: 7px 20px;
+        font-size: 14px;
+        margin-top: 5px;
+    }
+    20%{
+        font-size: 12px;
+    }
+    21%{
+        font-size: 0;
+        padding: 7px 10px;
+    }
+    100%{
+        padding: 0;
+        margin-top: 0;
+        font-size: 0;
+    }
+}

src/js/player.js

@@ -577,17 +577,24 @@ class DPlayer {
     }
 
     notice(text, time = 2000, opacity = 0.8) {
-        this.template.notice.innerHTML = text;
-        this.template.notice.style.opacity = opacity;
-        if (this.noticeTime) {
-            clearTimeout(this.noticeTime);
-        }
-        this.events.trigger('notice_show', text);
+        const notice = Template.NewNotice(text, opacity);
+
+        this.template.noticeList.appendChild(notice);
+        this.events.trigger('notice_show', notice);
+
         if (time > 0) {
-            this.noticeTime = setTimeout(() => {
-                this.template.notice.style.opacity = 0;
-                this.events.trigger('notice_hide');
-            }, time);
+            setTimeout(
+                (function (e, dp) {
+                    return () => {
+                        e.addEventListener('animationend', () => {
+                            dp.template.noticeList.removeChild(e);
+                        });
+                        e.classList.add('remove-notice');
+                        dp.events.trigger('notice_hide');
+                    };
+                })(notice, this),
+                time
+            );
         }
     }
 

src/js/template.js

@@ -86,7 +86,7 @@ class Template {
         this.qualityButton = this.container.querySelector('.dplayer-quality-icon');
         this.barPreview = this.container.querySelector('.dplayer-bar-preview');
         this.barWrap = this.container.querySelector('.dplayer-bar-wrap');
-        this.notice = this.container.querySelector('.dplayer-notice');
+        this.noticeList = this.container.querySelector('.dplayer-notice-list');
         this.infoPanel = this.container.querySelector('.dplayer-info-panel');
         this.infoPanelClose = this.container.querySelector('.dplayer-info-panel-close');
         this.infoVersion = this.container.querySelector('.dplayer-info-panel-item-version .dplayer-info-panel-item-data');
@@ -99,6 +99,14 @@ class Template {
         this.infoDanmakuApi = this.container.querySelector('.dplayer-info-panel-item-danmaku-api .dplayer-info-panel-item-data');
         this.infoDanmakuAmount = this.container.querySelector('.dplayer-info-panel-item-danmaku-amount .dplayer-info-panel-item-data');
     }
+
+    static NewNotice(text, opacity) {
+        const notice = document.createElement('div');
+        notice.classList.add('dplayer-notice');
+        notice.style.opacity = opacity;
+        notice.innerText = text;
+        return notice;
+    }
 }
 
 export default Template;

src/template/player.art

@@ -251,7 +251,7 @@
         </div>
     {{ /each }}
 </div>
-<div class="dplayer-notice"></div>
+<div class="dplayer-notice-list"></div>
 <button class="dplayer-mobile-play">
     {{@ icons.play }}
 </button>