答案：通过CSS的opacity、visibility和transform属性配合transition实现弹窗的显示与关闭动画。具体为：默认隐藏时设置opacity:0和visibility:hidden，添加.active类时opacity变为1且transform:scale(0.8)过渡到scale(1)，移除类时反向执行动画，JavaScript通过控制类的增减触发打开和关闭效果，点击遮罩或关闭按钮可移除.active类，从而完成带有淡入缩放效果的平滑关闭动画。
实现一个带有关闭动画的弹窗，关键在于利用 CSS 的过渡（transition）和变换（transform）属性，在弹窗隐藏时添加平滑的动画效果。下面是一个简单的初级项目中常见的实现方式。
1. 弹窗基本结构
先写一个简单的 HTML 结构：
2. 基础样式与显示控制
使用 opacity 和 transform 配合 visibility 来控制弹窗的显示与隐藏，并添加过渡动画。
立即学习“前端免费学习笔记（深入）”；
.modal {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal.active {
visibility: visible;
opacity: 1;
}
.modal-content {
background: #fff;
padding: 20px;
border-radius: 8px;
max-width: 400px;
width: 90%;
text-align: center;
transform: scale(0.8);
transition: transform 0.3s ease;
}
.modal.active .modal-content {
transform: scale(1);
}
3. 添加关闭按钮交互
用 JavaScript 控制弹窗的显示和关闭：
const modal = document.getElementById('modal');const closeBtn = document.querySelector('.close');
// 打开弹窗（可绑定到某个按钮）
function openModal() {
modal.classList.add('active');
}
// 关闭弹窗
closeBtn.onclick = function() {
modal.classList.remove('active');
}
// 点击遮罩层也关闭
window.onclick = function(e) {
if (e.target === modal) {
modal.classList.remove('active');
}
}
4. 动画效果说明
这个方案的动画逻辑是：
- 弹窗默认隐藏（visibility: hidden + opacity: 0）
- 添加 .active 类时，透明度从 0 到 1，同时内容从缩小状态放大到正常
- 移除类时，反向执行动画，实现淡入淡出 + 缩放效果
- transition 设置在 .modal 和 .modal-content 上，确保进出都有动画
基本上就这些。不复杂但容易忽略细节，比如 visibility 需要和 opacity 搭配使用才能让 transition 正常工作。只要控制好类的添加与移除，就能实现流畅的关闭动画。
