使用opacity和transform结合实现弹窗动画，通过CSS过渡与类控制状态切换。1. HTML结构包含遮罩层和内容框；2. 默认样式设置弹窗隐藏（opacity:0、scale:0.8、pointer-events:none），active类触发显示（opacity:1、scale:1）并启用事件响应；3. JavaScript通过添加/移除active类控制显隐；4. 可监听transitionend事件在动画结束后执行操作（如隐藏DOM）。该方案性能佳，避免重排，动效流畅自然。
实现弹窗的显示与隐藏动画，使用 opacity 与 transform 结合可以带来流畅自然的视觉效果。关键在于利用 CSS 的过渡（transition）和类控制来切换状态。
1. 基本结构：HTML 搭建弹窗
一个常见的弹窗包含遮罩层和内容框：
2. 默认样式与隐藏设置
初始状态下，弹窗不可见。使用 opacity 配合 transform 移出视图，并添加过渡动画：
立即学习“前端免费学习笔记（深入）”；
.modal {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none; /* 初始不响应事件 */
opacity: 0;
}
.modal.active {
pointer-events: auto;
opacity: 1;
}
.modal-overlay {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0.8);
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
min-width: 300px;
/ 添加过渡效果 /
transition: transform 0.3s ease-out;
}
.modal.active .modal-content {
transform: translate(-50%, -50%) scale(1);
}
说明：
- opacity 控制整体淡入淡出
- transform: scale() 实现缩放动画，从 0.8 放大到 1
- transition 应用在 .modal-content 上，让变化平滑
- pointer-events: none/autol 确保隐藏时无法点击
3. JavaScript 控制显示与隐藏
通过添加或移除 active 类来触发动画：
function showModal() {
document.getElementById('myModal').classList.add('active');
}
function hideModal() {
document.getElementById('myModal').classList.remove('active');
}
4. 可选增强：动画结束后的处理
如果需要在动画结束后再执行某些操作（如延迟隐藏 DOM），可监听 transitionend 事件：
const modal = document.getElementById('myModal');
modal.addEventListener('transitionend', function(e) {
if (!modal.classList.contains('active') && e.propertyName === 'opacity') {
// 动画完成后真正隐藏（可选）
modal.style.display = 'none';
}
});
基本上就这些。结合 opacity 和 transform 不仅性能好（避免重排），还能做出细腻的动效。注意 transition 要加在变化的属性上，比如 transform 和 opacity，这样显示和隐藏都有动画。
