优化Dialog消失效果

This commit is contained in:
Nino 2016-12-22 13:28:45 +08:00
parent 4e75ba090b
commit 979ae94f36

View File

@ -1,41 +1,26 @@
.zui-dialog,
.zui-dialog__mask {
position: absolute;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.zui-dialog__mask {
background: rgba(0, 0, 0, 0.7);
display: none;
}
@keyframes slideUp {
0% {
transform: translateY(100%);
opacity: 0;
}
10% {
opacity: 1;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.zui-dialog__container {
position: absolute;
position: fixed;
bottom: 0;
width: 750rpx;
background: white;
transform: translateY(0);
opacity: 0;
transform: translateY(150%);
transition: all 0.4s ease;
animation: slideUp 0.4s ease ;
animation-fill-mode: forwards;
animation-delay: 0.1s;
z-index: 11;
}
.zui-dialog--show .zui-dialog__container {
transform: translateY(0);
}
.zui-dialog--show .zui-dialog__mask {
display: block;
}