弹出框淡入淡出可通过CSS opacity与@keyframes实现。1. 设置opacity从0到1，结合visibility控制显示隐藏；2. 使用@keyframes定义fadeIn和fadeOut动画，配合animation-fill-mode:forwards保持最终状态；3. 通过JavaScript切换类名触发动画，移除.hide类时淡入，添加.hide类时淡出，确保过渡自然且无点击穿透。
弹出框的淡入淡出效果可以通过 CSS 中的 opacity 属性结合 @keyframes 实现，既能控制透明度变化，又能平滑过渡显示与隐藏。这种方式无需 JavaScript 动画库，轻量且兼容性好。
1. 使用 opacity 控制透明度过渡
通过设置元素的 opacity 从 0（完全透明）到 1（完全不透明），配合 transition 实现渐变效果。
- 初始状态设置
opacity: 0; visibility: hidden;，确保元素不可见且不占布局空间。 - 显示时改为
opacity: 1; visibility: visible;，并添加过渡动画时间。 -
visibility避免点击穿透，opacity提供视觉淡入效果。
2. 利用 @keyframes 定义关键帧动画
使用 @keyframes 可以更精细地控制动画过程，比如实现缓动或延迟效果。
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
.popup {
opacity: 0;
visibility: hidden;
animation: fadeIn 0.3s ease forwards;
}
.popup.hide {
animation: fadeOut 0.3s ease forwards;
}
注意：使用 animation-fill-mode: forwards; 让动画结束后保持最终状态。
3. 结合类名切换控制显示隐藏
在实际应用中，通过 JavaScript 动态添加或移除类名来触发动画。
- 默认给弹窗添加
.popup和.hide类表示隐藏。 - 需要显示时移除
.hide，触发淡入动画。 - 关闭时重新添加
.hide，播放淡出动画。
基本上就这些。合理运用 opacity 与 keyframes，能让弹窗交互更自然流畅，同时避免布局抖动。关键是控制好 visibility 与动画结束状态的衔接。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
