如何实现元素滑出页面并彻底消失的动画效果？

核心问题分析 #

你当前代码用了position: absolute，这个定位是相对于最近的已定位父元素（默认是body），滚动页面时元素会跟着body移动，导致滑走后还能看到；另外固定的translateY(190px)不够灵活，不同屏幕尺寸下可能滑不出视口。

解决方案步骤 #

1. 改用固定定位：把元素的position从absolute改成fixed，让元素相对于浏览器视口定位，滚动页面时不会跟着移动，滑出视口后就彻底看不到了。
2. 灵活滑出距离：把hidden类的transform: translateY(190px)改成transform: translateY(100%)，元素会刚好滑出自身高度的距离，完美适配所有屏幕。
3. 优化动画体验：给元素加上opacity过渡，让显示/隐藏更顺滑；同时在隐藏状态下设置pointer-events: none，避免用户点击到看不见的元素。
4. 简化JS逻辑：直接用classList.toggle切换类，不用手动判断状态，代码更简洁。

修改后的完整代码 #

HTML

<button>Toggle visibility</button>

<div class="cta-container mat-elevation-z5 hidden">
  <h1 class="header">Do something</h1>

  <p class="content">Yada yada</p>

  <button>Ok</button> <button>No</button>
</div>

CSS

.cta-container {
  position: fixed; /* 改为fixed定位，绑定视口 */
  bottom: 16px;
  left: 24px;
  padding: 16px;
  padding-right: 64px;
  background-color: white;
  transition: all 0.2s ease; /* 加入缓动效果提升动画质感 */
  opacity: 1;
  pointer-events: auto;
}

.header {
  font-size: 20px;
  margin-bottom: 8px;
}

.content {
  font-size: 16px;
}

.mat-elevation-z5 {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12)
}

.hidden {
  transform: translateY(100%); /* 滑出自身高度，适配所有尺寸 */
  opacity: 0;
  pointer-events: none; /* 隐藏时禁止点击 */
}

.visible {
  transform: translateY(-16px);
  opacity: 1;
  pointer-events: auto;
}

JS

const container = document.querySelector('.cta-container')

document.querySelector('button').addEventListener('click', () => {
  container.classList.toggle('hidden')
  container.classList.toggle('visible')
})

额外说明 #

• fixed定位让元素完全脱离文档流，不会影响页面其他元素的布局（也就是不改变页面尺寸）。
• translateY(100%)基于元素自身高度计算，不管元素内容多少，都能刚好滑出视口底部，比固定像素值更可靠。

内容的提问来源于stack exchange，提问作者Allan Juan