如何防止CSS动画元素上移时顶部从其他元素上方露出？

要实现.desc点击后滑入.label且无部分露出，核心是裁剪溢出内容+让.label覆盖.desc的移动路径，具体修改如下：

1. 调整CSS样式（固定Label高度版） #

修改后的完整CSS代码：

.text {
  display: flex;
  flex-direction: column;
  position: absolute; /* 保留原绝对定位需求 */
  overflow: hidden; /* 关键：裁剪容器外内容，防止.desc顶部露出 */
  height: fit-content; /* 容器高度匹配.label的高度 */
  background-color: transparent;
}
.label {
  width: 100%;
  z-index: 1;
  background-color: #ffffff; /* 设置与页面一致的背景色，覆盖下方.desc */
  height: 40px; /* 固定Label高度 */
  --label-height: 40px; /* 定义CSS变量用于动画计算 */
}
.desc {
  width: 100%;
  position: relative;
}

.hideDesc {
  animation: descHide 1s forwards;
}
@keyframes descHide {
  0% {
    opacity: 1;
    transform: translateY(0%);
  }
  100% {
    opacity: 0;
    /* 让.desc向上移动至与.label底部对齐，而非完全移到上方 */
    transform: translateY(calc(-100% + var(--label-height)));
  }
}

关键修改说明： #

• .text添加overflow: hidden：彻底裁剪超出容器的内容，杜绝.desc顶部露出。
• .label设置背景色：确保.desc向上移动时被覆盖，形成"滑入内部"的视觉效果。
• 动画transform调整：通过calc计算移动距离，让.desc最终停在.label下方，配合容器裁剪实现平滑收起。

2. 简化替代方案（无需固定高度） #

如果不想固定.label高度，可通过绝对定位调整.desc初始位置：

.text {
  display: flex;
  flex-direction: column;
  position: relative; /* 改为相对定位作为参照 */
  overflow: hidden;
  height: fit-content;
  background-color: transparent;
}
.label {
  width: 100%;
  z-index: 1;
  background-color: #ffffff;
}
.desc {
  width: 100%;
  position: absolute;
  top: 100%; /* 初始在.label下方、容器外 */
  left: 0;
}

.hideDesc {
  animation: descHide 1s forwards;
}
@keyframes descHide {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-100%); /* 向上移动自身高度，进入容器被.label覆盖 */
  }
}

此方案中，.desc初始在.text容器外，动画时向上移动进入容器，被.label背景覆盖，同时容器裁剪溢出，完全不会露出顶部。

3. 触发动画的JS代码（补充） #

点击.label时为.desc添加动画类：

document.querySelector('.label').addEventListener('click', function() {
  document.querySelector('.desc').classList.add('hideDesc');
});

内容的提问来源于stack exchange，提问作者Andrew Foulds