From 57f3a76feab01694a4d8e8419cf7b11c900c5066 Mon Sep 17 00:00:00 2001
From: Mimi <1119186082@qq.com>
Date: Sun, 29 Dec 2019 20:12:58 +0800
Subject: [PATCH] Optimize the display of waifu-toggle

---
 waifu-tips.js | 19 ++++++++-----------
 waifu.css     | 10 ++++++++++
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/waifu-tips.js b/waifu-tips.js
index 40058ea..118cdd1 100755
--- a/waifu-tips.js
+++ b/waifu-tips.js
@@ -49,7 +49,7 @@ function loadWidget(waifuPath, apiPath) {
 			$("#waifu").css({ bottom: -500 });
 			setTimeout(() => {
 				$("#waifu").hide();
-				$("#waifu-toggle").show().animate({ "margin-left": -50 }, 1000);
+				$("#waifu-toggle").addClass("waifu-toggle-active");
 			}, 3000);
 		});
 		var devtools = () => {};
@@ -220,17 +220,11 @@ function loadWidget(waifuPath, apiPath) {
 
 function initWidget(waifuPath = "/waifu-tips.json", apiPath = "") {
 	if (screen.width <= 768) return;
-	document.body.insertAdjacentHTML("beforeend", `<div id="waifu-toggle" style="margin-left: -100px;">
+	document.body.insertAdjacentHTML("beforeend", `<div id="waifu-toggle">
 			<span>看板娘</span>
 		</div>`);
-	$("#waifu-toggle").hover(() => {
-		$("#waifu-toggle").animate({ "margin-left": -30 }, 500);
-	}, () => {
-		$("#waifu-toggle").animate({ "margin-left": -50 }, 500);
-	}).click(() => {
-		$("#waifu-toggle").animate({ "margin-left": -100 }, 1000, () => {
-			$("#waifu-toggle").hide();
-		});
+	$("#waifu-toggle").click(() => {
+		$("#waifu-toggle").removeClass("waifu-toggle-active");
 		if ($("#waifu-toggle").attr("first-time")) {
 			loadWidget(waifuPath, apiPath);
 			$("#waifu-toggle").attr("first-time", false);
@@ -240,7 +234,10 @@ function initWidget(waifuPath = "/waifu-tips.json", apiPath = "") {
 		}
 	});
 	if (localStorage.getItem("waifu-display") && Date.now() - localStorage.getItem("waifu-display") <= 86400000) {
-		$("#waifu-toggle").attr("first-time", true).css({ "margin-left": -50 });
+		$("#waifu-toggle").attr("first-time", true);
+		setTimeout(() => {
+			$("#waifu-toggle").addClass("waifu-toggle-active");
+		}, 0);
 	} else {
 		loadWidget(waifuPath, apiPath);
 	}
diff --git a/waifu.css b/waifu.css
index 45b1ef1..5724a7a 100755
--- a/waifu.css
+++ b/waifu.css
@@ -6,12 +6,22 @@
 	cursor: pointer;
 	font-size: 12px;
 	left: 0;
+	margin-left: -100px;
 	padding: 5px 2px 5px 5px;
 	position: fixed;
+	transition: margin-left 1s;
 	width: 60px;
 	writing-mode: vertical-rl;
 }
 
+#waifu-toggle.waifu-toggle-active {
+	margin-left: -50px;
+}
+
+#waifu-toggle.waifu-toggle-active:hover {
+	margin-left: -30px;
+}
+
 #waifu {
 	bottom: -1000px;
 	left: 0;