From 544b68a123aca8e0c53a1db1f0d04cbe2ad10e1c Mon Sep 17 00:00:00 2001
From: wolegca <2738076308@qq.com>
Date: Wed, 23 Oct 2019 02:16:03 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BF=A1=E6=81=AF=E6=A1=86?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/myui.css     | 22 ++++++++++++++++++----
 js/initialize.js | 14 ++++++++++----
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/css/myui.css b/css/myui.css
index 19b1554..b07c634 100644
--- a/css/myui.css
+++ b/css/myui.css
@@ -228,7 +228,7 @@ body {
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
-	min-height: 150px;
+	/* min-height: 150px; */
 	min-width: 250px;
 	max-width: 460px;
 	color: white;
@@ -241,6 +241,7 @@ body {
 	z-index: 999;
 	text-overflow: ellipsis;
 	word-break: break-word;
+	background-color: rgb(50, 50, 50);
 }
 
 .msg-header {
@@ -261,12 +262,16 @@ body {
 	display: block;
 	position: relative;
 	width: 100%;
-	min-height: 70px;
-	background-color: rgb(50, 50, 50);
+	/* min-height: 70px; */
+	max-height:0px;
+	/* background-color: rgb(50, 50, 50); */
 	cursor: default;
 	padding: 10px;
 	text-overflow: ellipsis;
-	word-break: break-word
+	word-break: break-word;
+	animation: msgSlideOut 2s linear forwards,fadeIn .5s linear forwards;
+	opacity: 0;
+	overflow: hidden;
 }
 
 .msg-footer {
@@ -497,6 +502,15 @@ body {
 	}
 }
 
+@keyframes msgSlideOut {
+	from {
+		max-height: 0px;
+	}
+	to {
+		max-height:760px;
+	}
+}
+
 @media screen and (min-width:700px) {
 	input#menu-control:checked+div.menu-container {
 		width: 350px;
diff --git a/js/initialize.js b/js/initialize.js
index a595024..fd2c660 100644
--- a/js/initialize.js
+++ b/js/initialize.js
@@ -53,11 +53,17 @@ $(function () {
 	$(document.body).on('click', '.msg-footer span', function () {
 		var p = $(this).parent().parent();
 		var m = $('.mask');
-		p.css('animation', 'fadeOut .2s forwards');
-		m.css('animation', 'fadeOut .3s forwards');
+		$('.msg-content').animate({
+			height: '0px',
+			padding: '0px 10px'
+		}, 300);
 		setTimeout(function () {
-			p.remove();
-			m.remove();
+			p.css('animation', 'fadeOut .2s forwards');
+			m.css('animation', 'fadeOut .3s forwards');
+			setTimeout(function () {
+				p.remove();
+				m.remove();
+			}, 300);
 		}, 300);
 		message.alertCode = '';
 		if (message.callback)