网页特效入门：用 CSS 和 JavaScript 实现淡入淡出效果

淡入淡出是网页中常见的视觉过渡：元素逐渐显现或隐去，而不是突然出现或消失。提示信息、下拉面板、图片切换、内容加载状态等都可以使用这种效果。它看起来简单，但实际实现时还要考虑元素是否仍占据布局、是否能被键盘操作、动画被打断时会怎样，以及用户是否设置了减少动态效果。

本文从 CSS 的 opacity 和 transition 入手，再用 JavaScript 控制状态，给出可以直接运行的示例，并说明淡入淡出不能替代安全控制的原因。

一、淡入淡出到底改变了什么

淡入淡出的核心是改变元素的透明度。CSS 属性 opacity 的有效范围是 0 到 1：0 表示完全透明，1 表示完全不透明。浏览器可以在这两个值之间插值，产生平滑变化。

.box {
  opacity: 1;
  transition: opacity 300ms ease;
}

.box.is-hidden {
  opacity: 0;
}

transition 描述属性变化时如何过渡。上例中，透明度会在 300 毫秒内以 ease 速度曲线变化。只要元素的计算样式从一种状态变为另一种状态，浏览器就会执行过渡；CSS 本身并不负责决定什么时候切换状态，通常由伪类、媒体查询或 JavaScript 来触发。

透明度改变不会自动移除元素，也不会改变它的尺寸。透明度为零的元素通常仍占据原来的布局位置，仍可能接收鼠标点击，也可能留在键盘焦点顺序或辅助技术的阅读顺序中。因此，“看不见”不等于“不可交互”，也不等于“已从页面中移除”。

二、适合使用的场景

• 短暂提示：表单提交成功、复制完成等提示可以淡入显示，再淡出隐藏。
• 轻量面板：展开说明、筛选器或非关键的补充内容，可以通过透明度变化提示状态切换。
• 图片或内容切换：在新旧内容交替时使用淡入淡出，降低突然切换带来的视觉冲击。
• 装饰性反馈：按钮状态、卡片悬停效果等可以用短促的透明度过渡增强反馈。

如果内容变化会影响用户当前操作，例如打开菜单、关闭对话框、展开导航，动画只是体验的一部分。还必须正确管理焦点、键盘操作、语义状态和页面布局。对于必须立即可见或不可见的状态，不要为了动画而延迟必要的交互反馈。

三、CSS 淡入淡出：从悬停效果开始

下面的示例使用 CSS 伪类实现鼠标悬停和键盘聚焦时淡入。将代码保存为 fade-hover.html 后即可在浏览器中打开。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS 淡入淡出</title>
  <style>
    .card {
      width: min(24rem, 90vw);
      padding: 1rem;
      border: 1px solid #bbb;
      border-radius: 0.5rem;
      font-family: sans-serif;
    }

    .card__detail {
      opacity: 0;
      transition: opacity 250ms ease;
    }

    .card:hover .card__detail,
    .card:focus-within .card__detail {
      opacity: 1;
    }

    .card a:focus-visible {
      outline: 3px solid #1769aa;
      outline-offset: 3px;
    }

    @media (prefers-reduced-motion: reduce) {
      .card__detail {
        transition-duration: 0.01ms;
      }
    }
  </style>
</head>
<body>
  <article class="card">
    <h1>了解这张卡片</h1>
    <p class="card__detail">
      这段补充内容会在鼠标悬停或卡片内元素获得焦点时显示。
      <a href="#more">查看相关内容</a>
    </p>
  </article>
</body>
</html>

这个例子适合非关键的视觉提示，但不适合用来隐藏必须通过键盘访问的内容。透明度为零时，段落里的链接仍可能获得焦点，只是用户看不到它。若内容需要按需展开，应明确管理可见状态和键盘可达性，而不是只把透明度设为零。

四、用 JavaScript 切换淡入淡出状态

实际页面通常由按钮或业务事件触发显示状态。推荐让 JavaScript 只切换一个状态类，动画细节交给 CSS。这样样式、时长和动效偏好可以集中管理，也避免在脚本中逐帧修改样式。

以下是完整示例。面板初始隐藏，按钮点击后显示或隐藏。隐藏状态同时使用 visibility，避免透明面板继续接收交互；面板还通过 aria-hidden 同步辅助技术可见性，按钮使用 aria-expanded 表达展开状态。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JavaScript 控制淡入淡出</title>
  <style>
    .panel {
      max-width: 32rem;
      margin-top: 1rem;
      padding: 1rem;
      border: 1px solid #888;
      border-radius: 0.5rem;
      opacity: 1;
      visibility: visible;
      transition:
        opacity 240ms ease,
        visibility 0s linear 0s;
    }

    .panel.is-hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition:
        opacity 240ms ease,
        visibility 0s linear 240ms;
    }

    @media (prefers-reduced-motion: reduce) {
      .panel,
      .panel.is-hidden {
        transition-duration: 0.01ms;
      }
    }
  </style>
</head>
<body>
  <button id="toggle" type="button"
          aria-controls="panel"
          aria-expanded="false">
    显示说明
  </button>

  <section id="panel" class="panel is-hidden" aria-hidden="true">
    <h2>补充说明</h2>
    <p>这里是可显示或隐藏的内容。</p>
  </section>

  <script>
    const button = document.querySelector("#toggle");
    const panel = document.querySelector("#panel");

    button.addEventListener("click", () => {
      const willShow = panel.classList.contains("is-hidden");

      panel.classList.toggle("is-hidden", !willShow);
      panel.setAttribute("aria-hidden", String(!willShow));
      button.setAttribute("aria-expanded", String(willShow));
      button.textContent = willShow ? "隐藏说明" : "显示说明";
    });
  </script>
</body>
</html>

这里的 visibility 在隐藏时延迟 240 毫秒，目的是先完成淡出，再让元素不可见；显示时则立即设为可见，随后透明度过渡到不透明。pointer-events: none 阻止隐藏过程中的鼠标指针交互，但它本身不会管理键盘焦点或辅助技术状态，因此示例还同步设置了 aria-hidden。

如果面板里包含链接、按钮或输入框，关闭面板时还要考虑焦点是否停留在即将隐藏的内容中。交互组件的焦点处理应按具体场景设计。尤其是对话框，不能只靠透明度隐藏：还需要实现合适的对话框语义、焦点进入与返回、键盘操作等行为。可以使用原生 <dialog> 并遵循其交互模型，或使用经过充分测试的组件实现。

五、参数和属性的边界

1. 透明度范围

opacity 的有效范围是 0 到 1。写样式时应使用这个范围内的值，避免依赖越界值在不同上下文中的处理细节。小数可用于部分透明，例如 0.5。父元素设置透明度时，子元素整体会受到影响；子元素不能通过设置更大的透明度恢复父元素已经失去的透明度。

2. 过渡时长和速度曲线

transition-duration 接受时间值，例如 200ms 或 0.3s。时长越长，动画越慢；时长为零时不会出现可感知的过渡。时长设置得过长可能让交互显得迟缓。速度曲线可用 ease、linear、ease-in、ease-out 等关键字，也可以使用 cubic-bezier() 自定义。选择曲线时应以实际交互感受为准，不要假定某个曲线适合所有元素。

3. 不是所有属性都适合过渡

opacity、颜色和尺寸等属性通常可以参与过渡；display 这类离散状态不能像透明度那样自然地在两个值之间插值。直接从 display: none 切换到其他显示值，不会因此自动获得淡入效果。常见处理是让元素保持可参与渲染的状态，使用透明度配合 visibility，或者用脚本在过渡结束后再移除元素。不过后一种方式必须考虑动画被中断、重复操作和过渡事件未触发等情况。

4. 过渡不是固定时长的脚本计时器

CSS 过渡会根据样式变化启动或反向变化。若用户在动画过程中再次点击，浏览器通常会根据新的目标状态继续处理，而不是保证每次都完整播放一遍。因此，避免用固定的 setTimeout 假定动画必定在某个时刻结束。确实需要在动画完成后执行操作时，可以监听 transitionend，但要注意：事件可能因为属性不匹配、动画被取消、元素被移除、属性值未发生变化等原因不触发；它也可能因多个过渡属性而触发多次。监听时应检查事件的 propertyName 和目标元素，并为异常或取消情况设计后备逻辑。

六、常见错误与排查方法

错误一：只改透明度，却以为元素已经隐藏

透明元素仍可能占据布局空间，也可能响应鼠标或键盘操作。先确定需求：如果只需要视觉淡出，可以只改 opacity；如果隐藏后不应参与交互，则还需处理 visibility、焦点和辅助技术状态；如果隐藏后不应占据布局，则还要考虑移出布局，例如使用 display: none，但应安排好淡出完成后的状态切换。

错误二：给 display 加 transition，期待它自动淡入

普通的 display: none 与 display: block 切换不是连续的透明度变化。可以先让元素可渲染，再设置可见状态；或者使用适合的布局与可见性策略。不要把透明度动画能工作误认为所有属性都能按同样方式动画。

错误三：鼠标效果能用，键盘却看不到

如果效果只写在 :hover 上，键盘用户通常无法触发。根据场景补充 :focus 或 :focus-within，并确保焦点样式清晰可见。对于需要点击才能展开的内容，应使用真实按钮，而不是给普通文本加鼠标事件冒充按钮。

错误四：淡出后内容仍可访问，或提前从无障碍树中消失

需要分别考虑视觉状态、交互状态和辅助技术状态。示例在开始隐藏时就设置 aria-hidden="true"，适用于内容不应继续被辅助技术读取的简单面板，但焦点不能仍留在其中。更复杂的组件要明确状态切换时机，并处理焦点移动；不能只根据动画是否结束来猜测用户当前应处于什么位置。

错误五：JavaScript 频繁直接写内联样式

反复用脚本设置 element.style.opacity、定时器和手动清理，容易让逻辑分散，并产生竞争条件。对于普通淡入淡出，用类名表达状态通常更清晰。若动画需要逐帧控制、精确取消或读取动画状态，可以考虑 Web Animations API，但仍应处理动画取消、状态同步和减少动态效果等问题。

七、尊重减少动态效果设置

部分用户在操作系统中启用了减少动态效果。网页可以通过 prefers-reduced-motion 媒体查询检测这一偏好，并缩短或取消非必要动画。示例使用很短的过渡时间，是为了让视觉状态仍能快速更新；也可以在具体产品设计中完全移除动效。无论采用哪种方式，都应保证功能不依赖动画才能完成。

@media (prefers-reduced-motion: reduce) {
  .animated {
    transition: none;
  }
}

八、淡入淡出不是安全控制

通过 opacity、visibility、类名切换或前端脚本隐藏内容，都只是浏览器端的呈现方式。元素或数据仍可能存在于页面 DOM、JavaScript 状态、网络响应或缓存中。用户也可以查看页面源码、使用开发者工具或自行修改客户端代码。因此，不能用淡出效果隐藏敏感信息，也不能以“按钮看不到了”作为权限校验。

权限和敏感数据保护必须由服务端落实：服务端根据当前用户身份与权限决定是否返回数据、是否允许执行操作，并对每次请求进行校验。前端隐藏按钮可以改善界面体验，但不构成安全边界。还要注意，页面内已有的数据即使不显示，也不应被当作受保护的数据。

九、实现前的检查清单

• 明确隐藏后元素是否仍应占据布局空间。
• 检查透明状态下鼠标、键盘和辅助技术是否仍能访问内容。
• 交互控制使用语义合适的按钮，并同步更新必要的状态属性。
• 考虑动画中途再次触发、元素被移除或过渡事件未触发的情况。
• 尊重 prefers-reduced-motion，不让动画成为操作前提。
• 不要把前端隐藏当作权限控制或敏感信息保护。

简单的淡入淡出通常只需要 CSS 的 opacity 和 transition，由 JavaScript 切换状态类即可。真正容易出错的部分不在动画本身，而在隐藏之后元素还占不占布局、还能不能交互、辅助技术如何感知，以及用户快速重复操作时状态是否一致。先把这些边界设计清楚，再添加动效，效果才会既自然又可靠。