答案：使用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 类来触发动画：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

.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 属性。通过切换类来触发变化，既简洁又高效。不复杂但容易忽略细节。