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%;
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;

14
js/initialize.js
View File

@ -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)