如何实现文本显示与隐藏的平滑动画效果-html教程-PHP中文网

本文详解如何用 CSS 动画 + JavaScript 控制文本的入场与退场动画，解决 display: none 导致动画失效的问题，通过 opacity、transform 和 transition 实现真正可感知的淡入/滑出效果。

本文详解如何用 css 动画 + javascript 控制文本的入场与退场动画，解决 `display: none` 导致动画失效的问题，通过 `opacity`、`transform` 和 `transition` 实现真正可感知的淡入/滑出效果。

在 Web 开发中，常见的误区是直接使用 element.style.display = "none" 来隐藏元素——这会立即中断所有 CSS 动画，导致“隐藏无动画”。因为 display 是非连续属性，无法被过渡（transition）或动画（@keyframes）接管。要实现“文字消失前带动画”，必须让元素在视觉上渐隐/位移后，再设置 display: none（或更推荐：用 visibility + opacity + transform 组合控制）。

✅ 正确思路：用 CSS 过渡替代 display 切换

核心原则：动画阶段保持元素在文档流中（如 visibility: visible），仅通过 opacity、transform、height 等可动画属性控制视觉状态；动画结束后再安全地设为不可见或移除。

以下是一个健壮、语义清晰的实现方案：

Aha

一款面向网红营销的AI智能体平台，可辅助品牌进行达人发现、营销策划和社交媒体内容相关工作。

下载

1. HTML 结构（语义化 + 便于 JS 操作）

<div class="text-controller">
  <button data-target="Text1">显示 Text1</button>
  <button data-target="Text2">显示 Text2</button>
  <button data-target="Text3">显示 Text3</button>
  <button id="hideAll">全部隐藏</button>
</div>

<div class="text-container">
  <p id="Text1" class="text-animated">Text1</p>
  <p id="Text2" class="text-animated">Text2</p>
  <p id="Text3" class="text-animated">Text3</p>
</div>

2. CSS 动画与过渡（支持入场 + 退场）

.text-animated {
  opacity: 0;
  transform: translateX(-100vw);
  visibility: hidden;
  transition: 
    opacity 0.4s ease-out,
    transform 0.4s ease-out,
    visibility 0.4s linear;
}

.text-animated.show {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
}

.text-animated.hide {
  opacity: 0;
  transform: translateX(100vw);
  /* visibility remains 'visible' during animation */
}

? 注意：visibility 不参与 easing，但能确保元素在动画期间仍可响应过渡；transition 同时监听多个属性，保证同步生效。

3. JavaScript 控制逻辑（避免内联事件，提升可维护性）

// 获取所有文本元素和按钮
const texts = document.querySelectorAll('.text-animated');
const triggerButtons = document.querySelectorAll('[data-target]');
const hideAllBtn = document.getElementById('hideAll');

// 显示指定文本（先隐藏全部，再显示目标）
function showText(id) {
  // 隐藏所有（添加 .hide 类，触发退出动画）
  texts.forEach(el => el.classList.remove('show').add('hide'));

  // 等待动画结束（0.4s），再清理状态并显示目标
  setTimeout(() => {
    texts.forEach(el => el.classList.remove('hide'));
    const target = document.getElementById(id);
    if (target) target.classList.add('show');
  }, 400);
}

// 全部隐藏（不等待，直接触发退出动画）
function hideAll() {
  texts.forEach(el => el.classList.remove('show').add('hide'));
  // 可选：动画结束后彻底隐藏（提升性能）
  setTimeout(() => {
    texts.forEach(el => el.classList.remove('hide'));
  }, 400);
}

// 绑定事件
triggerButtons.forEach(btn => {
  btn.addEventListener('click', () => {
    showText(btn.dataset.target);
  });
});

hideAllBtn.addEventListener('click', hideAll);