使用 CSS 实现弹窗的显示与隐藏动画，可以通过结合 opacity 和 transform 属性来实现平滑的过渡效果。以下是一个简单的示例，展示如何通过 CSS 动画实现弹窗的淡入淡出和位移动画。✅ 示例：弹窗显示与隐藏动画1. HTML 结构<div class="modal"> <div class="modal-content"> <span class="close-btn"-Golang学习网

首页 > 文章 > 前端

使用 CSS 实现弹窗的显示与隐藏动画，可以通过结合 opacity 和 transform 属性来实现平滑的过渡效果。以下是一个简单的示例，展示如何通过 CSS 动画实现弹窗的淡入淡出和位移动画。✅ 示例：弹窗显示与隐藏动画1. HTML 结构

前往漫画官网入口并下载 ➜

本文深入解析了如何用 CSS 实现流畅自然的弹窗动画，强调必须协同控制 opacity 和 transform 属性（如 scale 或 translateY）才能避免闪烁、占位或中断等常见问题；通过 @keyframes 定义正向与反向动画、严格依赖 class 切换而非内联样式、精准监听 animationend 事件并在动画结束后才设置 display: none，辅以硬件加速优化和布局避坑技巧，帮助开发者真正落地高性能、高一致性的弹窗交互动效。

css 想让弹窗显示隐藏有动画过渡怎么办_结合 opacity 和 transform 定义动画

用 `@keyframes` 同时控制 `opacity` 和 `transform`

只改 opacity 会闪、只改 transform 会占位，必须两者配合才能实现「淡入+缩放/位移」的自然过渡。关键点是：起始帧设 opacity: 0 + transform: scale(0.95)（或 translateY(10px)），结束帧设 opacity: 1 + transform: scale(1)（或 translateY(0)）。

示例动画定义：

@keyframes modal-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

隐藏时也要定义反向动画，不能只靠 `display: none`

display: none 会让元素瞬间消失，动画直接中断。正确做法是：先触发隐藏动画（比如 modal-fade-out），动画结束后再通过 JS 移除类或设置 display: none。

动画结束事件监听用 animationend，注意兼容性（webkitAnimationEnd 在旧 Safari 中需要）
不要在 CSS 里给隐藏状态写 display: none —— 它和动画不共存
过渡时间需和动画时长一致，例如动画 0.2s，则 JS 延迟 200ms 后再设 display: none

触发动画要靠 class 切换，不是直接改 style

直接操作 element.style.opacity 或 element.style.transform 会覆盖 CSS 动画，且无法触发 animationend。必须用 class 控制：

显示弹窗：添加 modal--show 类，该类绑定 animation: modal-fade-in 0.2s ease
隐藏弹窗：添加 modal--hide 类，绑定 animation: modal-fade-out 0.2s ease
确保两个 class 不同时存在，避免动画冲突

注意 transform 的硬件加速和回流问题

transform 本身是合成层属性，但若父容器有 will-change: transform 或 transform: translateZ(0)，可能提前创建图层，影响性能。实际中：

对弹窗自身加 transform: translateZ(0) 有助于平滑动画（尤其在移动端）
避免在动画过程中读取 offsetTop、getBoundingClientRect() 等触发同步布局计算
如果弹窗内有大量滚动内容，动画期间禁止用户滚动，否则容易卡顿

动画真正生效的临界点，往往卡在「类名添加时机」和「display 切换时机」之间。这两个时间点错开 1ms，就可能看不到过渡效果。

好了，本文到此结束，带大家了解了《使用 CSS 实现弹窗的显示与隐藏动画，可以通过结合 opacity 和 transform 属性来实现平滑的过渡效果。以下是一个简单的示例，展示如何通过 CSS 动画实现弹窗的淡入淡出和位移动画。✅ 示例：弹窗显示与隐藏动画1. HTML 结构

2. CSS 样式 .modal { display: none; /* 默认隐藏 */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; opacity: 0; transform: scale(0.9); transition: all 0.3s ease-in-out; } .modal.show { display: flex; opacity: 1; transform: scale(1); } .modal-content { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 10》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

资料下载

编程学习资料下载

精选编程（Golang、Python、Java、C++、JavaScript等）教程、电子书与示例源码，一键打包本地下载学习。

立即下载

用 @keyframes 同时控制 opacity 和 transform

隐藏时也要定义反向动画，不能只靠 display: none

触发动画要靠 class 切换，不是直接改 style

注意 transform 的硬件加速和回流问题

用 `@keyframes` 同时控制 `opacity` 和 `transform`

隐藏时也要定义反向动画，不能只靠 `display: none`