wcx/wolegca.github.io
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加信息框动画

Browse Source
This commit is contained in:
wolegca 2019-10-23 02:16:03 +08:00
parent 6d96bd8578
commit 544b68a123
2 changed files with 28 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
css/myui.css
View File

@ -228,7 +228,7 @@ body {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
min-height: 150px; /* min-height: 150px; */
min-width: 250px; min-width: 250px;
max-width: 460px; max-width: 460px;
color: white; color: white;
@ -241,6 +241,7 @@ body {
z-index: 999; z-index: 999;
text-overflow: ellipsis; text-overflow: ellipsis;
word-break: break-word; word-break: break-word;
background-color: rgb(50, 50, 50);
} }
.msg-header { .msg-header {
@ -261,12 +262,16 @@ body {
display: block; display: block;
position: relative; position: relative;
width: 100%; width: 100%;
min-height: 70px; /* min-height: 70px; */
background-color: rgb(50, 50, 50); max-height:0px;
/* background-color: rgb(50, 50, 50); */
cursor: default; cursor: default;
padding: 10px; padding: 10px;
text-overflow: ellipsis; 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 { .msg-footer {
@ -497,6 +502,15 @@ body {
} }
} }
@keyframes msgSlideOut {
from {
max-height: 0px;
}
to {
max-height:760px;
}
}
@media screen and (min-width:700px) { @media screen and (min-width:700px) {
input#menu-control:checked+div.menu-container { input#menu-control:checked+div.menu-container {
width: 350px; width: 350px;

14
js/initialize.js
View File

@ -53,11 +53,17 @@ $(function () {
$(document.body).on('click', '.msg-footer span', function () { $(document.body).on('click', '.msg-footer span', function () {
var p = $(this).parent().parent(); var p = $(this).parent().parent();
var m = $('.mask'); var m = $('.mask');
p.css('animation', 'fadeOut .2s forwards'); $('.msg-content').animate({
m.css('animation', 'fadeOut .3s forwards'); height: '0px',
padding: '0px 10px'
}, 300);
setTimeout(function () { setTimeout(function () {
p.remove(); p.css('animation', 'fadeOut .2s forwards');
m.remove(); m.css('animation', 'fadeOut .3s forwards');
setTimeout(function () {
p.remove();
m.remove();
}, 300);
}, 300); }, 300);
message.alertCode = ''; message.alertCode = '';
if (message.callback) if (message.callback)