答案：使用CSS opacity和transform结合transition实现弹窗动画，通过添加.show类触发渐显、缩放或滑入效果，用JavaScript控制类的切换以显示或隐藏弹窗，避免操作display属性，提升动画性能。
要使用 CSS 制作一个带有平滑动画效果的提示弹窗，核心是利用 opacity 控制透明度，结合 transform 实现位移或缩放，再通过 transition 实现过渡动画。这种方式性能好，不会触发重排。
1. 基础结构：HTML 和默认样式
先定义弹窗的基本 HTML 结构：
设置初始样式，让弹窗默认不可见：
立即学习“前端免费学习笔记（深入）”；
.modal-overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
opacity: 0; /* 初始完全透明 */
pointer-events: none; /* 不响应点击事件 */
transition: opacity 0.3s ease;
}
.modal-content {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transform: scale(0.9); / 初始缩小 /
transition: transform 0.3s ease;
}
2. 显示状态：通过类名控制动画
添加一个 .show 类来触发动画：
.modal-overlay.show {
opacity: 1;
pointer-events: auto;
}
.modal-overlay.show .modal-content {
transform: scale(1); / 放大到正常尺寸 /
}
当元素被添加 show 类时，opacity 从 0 到 1，transform 从缩小变为正常，形成渐显+放大出现的效果。
3. JavaScript 控制显示与隐藏
用简单的 JS 控制类的添加和移除：
function showModal() {
document.getElementById('modal').classList.add('show');
}
function closeModal() {
document.getElementById('modal').classList.remove('show');
}
// 示例：页面加载后 1 秒自动弹出
setTimeout(showModal, 1000);
点击遮罩层也可关闭：
document.getElementById('modal').addEventListener('click', function(e) {
if (e.target === this) {
closeModal();
}
});
4. 可选增强：使用 translateY 实现上下滑入
如果想让弹窗从上方滑入，可以改用 translateY：
.modal-content {
transform: translateY(-20px) scale(0.9);
transition: transform 0.3s ease, opacity 0.3s ease;
}
.modal-overlay.show .modal-content {
transform: translateY(0) scale(1);
}
这样在出现时会有一个“从上落下 + 放大 + 渐显”的复合动画，视觉更自然。
基本上就这些。关键是利用 opacity 和 transform 的可动画特性，配合 transition 平滑过渡，避免直接操作 display 属性。通过切换类来触发变化，既简洁又高效。不复杂但容易忽略细节。
