向上滑动模态-覆盖背景，以直接启动

Question

我有一个带有关键帧的模态滑动。当模态开始向上滑动但无法工作时，我希望覆盖中的背景rgba能立即启动。这是我的代码：

.overlay {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
position: fixed;
top: 0;
left: 0;
}
.modal{
margin: auto;
position: fixed;
overflow: scroll;
height: 100%;
animation: slidein 0.3s;
}
@keyframes slidein {
0% {
transform: translateY(400px);
animation-timing-function: ease-out;
}
60% {
transform: translateY(20px);
animation-timing-function: ease-in;
}
80% {
transform: translateY(10px);
animation-timing-function: ease-out;
}
100% {
transform: translateY(0px);
animation-timing-function: ease-in;
}
}

如有任何帮助，将不胜感激

Answer 1

可能它不起作用，因为您添加了height:100%，并且overlay的父级可能没有固定的高度集。试试这个方法：

.overlay {        
background-color: rgba(0, 0, 0, 0.2);
position: fixed;
top: 0;
left: 0;
bottom:0;
right:0;
margin:auto;
}