答案：使用css opacity和transform结合transition实现弹窗动画，通过添加.show类触发渐显、缩放或滑入效果，用javaScript控制类的切换以显示或隐藏弹窗，避免操作display属性，提升动画性能。
要使用 CSS 制作一个带有平滑动画效果的提示弹窗，核心是利用 opacity 控制透明度，结合 transform 实现位移或缩放，再通过 transition 实现过渡动画。这种方式性能好，不会触发重排。
1. 基础结构：html 和默认样式
先定义弹窗的基本 HTML 结构：
<div class="modal-overlay" id="modal"> <div class="modal-content"> <p>这是一个提示弹窗！</p> <button onclick="closeModal()">关闭</button> </div> </div>设置初始样式，让弹窗默认不可见：
立即学习“前端免费学习笔记（深入）”；
.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; } <p>.modal-content { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: scale(0.9); /<em> 初始缩小 </em>/ transition: transform 0.3s ease; }</p>2. 显示状态：通过类名控制动画
添加一个 .show 类来触发动画：
.modal-overlay.show { opacity: 1; pointer-events: auto; } <p>.modal-overlay.show .modal-content { transform: scale(1); /<em> 放大到正常尺寸 </em>/ }</p>当元素被添加 show 类时，opacity 从 0 到 1，transform 从缩小变为正常，形成渐显+放大出现的效果。
3. javascript 控制显示与隐藏
用简单的 js 控制类的添加和移除：
function showModal() { document.getElementById('modal').classlist.add('show'); } <p>function closeModal() { document.getElementById('modal').classList.remove('show'); }</p><p>// 示例：页面加载后 1 秒自动弹出 setTimeout(showModal, 1000);</p>点击遮罩层也可关闭：
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; } <p>.modal-overlay.show .modal-content { transform: translateY(0) scale(1); }</p>这样在出现时会有一个“从上落下 + 放大 + 渐显”的复合动画，视觉更自然。
基本上就这些。关键是利用 opacity 和 transform 的可动画特性，配合 transition 平滑过渡，避免直接操作 display 属性。通过切换类来触发变化，既简洁又高效。不复杂但容易忽略细节。