From 3526cbcbf2e581c8d17bd26ce4cfd84f7c0e0d43 Mon Sep 17 00:00:00 2001
From: Mimi <1119186082@qq.com>
Date: Sun, 29 Dec 2019 23:04:20 +0800
Subject: [PATCH] Optimize the display of waifu-tips

---
 waifu-tips.js | 10 ++++++----
 waifu.css     |  6 ++++++
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/waifu-tips.js b/waifu-tips.js
index b27a4d4..56c9a40 100755
--- a/waifu-tips.js
+++ b/waifu-tips.js
@@ -1,6 +1,6 @@
 /*
- * https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02
- * https://www.fghrsh.net/post/123.html
+ * Live2D Widget
+ * https://github.com/stevenjoezhang/live2d-widget
  */
 
 function loadWidget(waifuPath, apiPath) {
@@ -136,10 +136,12 @@ function loadWidget(waifuPath, apiPath) {
 			}
 			if (Array.isArray(text)) text = text[Math.floor(Math.random() * text.length)];
 			sessionStorage.setItem("waifu-text", priority);
-			$("#waifu-tips").stop().html(text).fadeTo(200, 1);
+			var tips = document.getElementById("waifu-tips");
+			tips.innerHTML = text;
+			tips.classList.add("waifu-tips-active");
 			messageTimer = setTimeout(() => {
 				sessionStorage.removeItem("waifu-text");
-				$("#waifu-tips").fadeTo(1000, 0);
+				tips.classList.remove("waifu-tips-active");
 			}, timeout);
 		}
 	}
diff --git a/waifu.css b/waifu.css
index 5724a7a..5b8d872 100755
--- a/waifu.css
+++ b/waifu.css
@@ -57,10 +57,16 @@
 	padding: 5px 10px;
 	position: absolute;
 	text-overflow: ellipsis;
+	transition: opacity 1s;
 	width: 250px;
 	word-break: break-all;
 }
 
+#waifu-tips.waifu-tips-active {
+	opacity: 1;
+	transition: opacity .2s;
+}
+
 #waifu-tips span {
 	color: #0099cc;
 }