站内消息动画展示

src/components/MainLayout/SiteMessagePopup.vue

@@ -1,31 +1,38 @@
 <template>
-  <div v-if="unreadMessage" class="popup">
-    <h5
-      style=" padding: 5px; background:rgba(19,187,138,1);
+  <transition
+    name="fade"
+    mode="out-in"
+    appear
+    :duration="{ enter: 500, leave: 300 }"
+  >
+    <div v-if="unreadMessage" :key="unreadMessage.id" class="popup">
+      <h5
+        style=" padding: 5px; background:rgba(19,187,138,1);
               border-radius:6px 6px 0px 0px; font-size:14px;
               font-weight:500;
               color:rgba(255,255,255,1);
               line-height:20px;"
-    >
-      {{ unreadMessage.title }}
-    </h5>
+      >
+        {{ unreadMessage.title }}
+      </h5>
 
-    <p
-      style="text-overflow: ellipsis; text-indent: 2em; text-align: left; height: 100px; overflow: hidden; margin: 20px;"
-    >
-      {{ unreadMessageContent }}
-    </p>
-    <div style="text-align: left; margin-left: 20px; margin-bottom: 10px;">
-      <router-link :to="'/site-message/' + unreadMessage.id">
-        详情 >>>
-      </router-link>
-      <span
-        @click="ignoreMessage"
-        style="display: inline-block; margin-left: 20px; cursor: pointer;"
-        >忽略</span
+      <p
+        style="text-overflow: ellipsis; text-indent: 2em; text-align: left; height: 100px; overflow: hidden; margin: 20px;"
       >
+        {{ unreadMessageContent }}
+      </p>
+      <div style="text-align: left; margin-left: 20px; margin-bottom: 10px;">
+        <router-link :to="'/site-message/' + unreadMessage.id">
+          详情 >>>
+        </router-link>
+        <span
+          @click="ignoreMessage"
+          style="display: inline-block; margin-left: 20px; cursor: pointer;"
+          >忽略</span
+        >
+      </div>
     </div>
-  </div>
+  </transition>
 </template>
 
 <script>