时间戳

首页 > 解决方案 > 将绝对位置定位在屏幕顶部之外

css - 将绝对位置定位在屏幕顶部之外

问题描述

我有这个小模态，它在进入时从页面顶部滑入，并在单击它时再次滑出。

我的问题是我不希望它在点击后完全离开页面。我需要将模态显示的底部 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);
  }
}

提前致谢！

标签： csspositioncss-animationskeyframe

解决方案

问题在于滑动顶部的 100% 声明。

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

可能会解决问题

推荐阅读