From c19e7692d49d2c8ee2f76af7b0340039605afb76 Mon Sep 17 00:00:00 2001
From: John Smith <xfgryujk@126.com>
Date: Fri, 12 Feb 2021 17:25:49 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0SC=E5=9B=BA=E5=AE=9A=E6=A0=8F?=
 =?UTF-8?q?=E8=BF=87=E6=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ChatRenderer/Ticker.vue    | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ChatRenderer/Ticker.vue b/frontend/src/components/ChatRenderer/Ticker.vue
index a54cbb1..d067471 100644
--- a/frontend/src/components/ChatRenderer/Ticker.vue
+++ b/frontend/src/components/ChatRenderer/Ticker.vue
@@ -1,7 +1,9 @@
 <template>
   <yt-live-chat-ticker-renderer :hidden="showMessages.length === 0">
     <div id="container" dir="ltr" class="style-scope yt-live-chat-ticker-renderer">
-      <div id="items" class="style-scope yt-live-chat-ticker-renderer">
+      <transition-group tag="div" :css="false" @enter="onTickerItemEnter" @leave="onTickerItemLeave"
+        id="items" class="style-scope yt-live-chat-ticker-renderer"
+      >
         <yt-live-chat-ticker-paid-message-item-renderer v-for="message in showMessages" :key="message.raw.id"
           tabindex="0" class="style-scope yt-live-chat-ticker-renderer" style="overflow: hidden;"
           @click="onItemClick(message.raw)"
@@ -19,7 +21,7 @@
             </div>
           </div>
         </yt-live-chat-ticker-paid-message-item-renderer>
-      </div>
+      </transition-group>
     </div>
     <template v-if="pinnedMessage">
       <membership-item :key="pinnedMessage.id" v-if="pinnedMessage.type === MESSAGE_TYPE_MEMBER"
@@ -98,6 +100,27 @@ export default {
     window.clearInterval(this.updateTimerId)
   },
   methods: {
+    async onTickerItemEnter(el, done) {
+      let width = el.clientWidth
+      el.style.width = 0
+      await this.$nextTick()
+      el.style.width = `${width}px`
+      window.setTimeout(done, 200)
+    },
+    onTickerItemLeave(el, done) {
+      el.classList.add('sliding-down')
+      window.setTimeout(() => {
+        el.classList.add('collapsing')
+        el.style.width = 0
+        window.setTimeout(() => {
+          el.classList.remove('sliding-down')
+          el.classList.remove('collapsing')
+          el.style.width = 'auto'
+          done()
+        }, 200)
+      }, 200)
+    },
+
     getShowAuthorName: constants.getShowAuthorName,
     needToShow(message) {
       let pinTime = this.getPinTime(message)