屏幕顶部的绝对位置

Question

我有一个小的模态，当进入页面时从页面顶部滑入，当点击它时再次滑入。

我的问题是我不希望它在点击后完全离开页面。我需要保持底部32px的模态显示在屏幕的顶部，这样用户可以再次点击它，它会滑回去。此外，模态本身是动态的，并根据传递给它的信息改变高度。

我的关键帧是:

@keyframes slide-bottom {
0% {
top: -100%;
}
100% {
top: 50%;
transform: translateY(-50%);
}
}
@keyframes slide-top {
0% {
top: 50%;
transform: translateY(-50%);
}
100% {
top: -100%;
transform: translateY(32px);
}
}

提前感谢!

Answer 1

问题在于slide-top的100%声明。

100% {
top : calc(-50% + 32px);
transform : translateY(0%);
}

可能会修复这个问题