如何用CSS动画实现显示新文本时原有文本移动及新文本淡入效果？

嘿，我来帮你搞定这个流畅的动画效果！你原来用display直接切换的方式太生硬了，咱们改用CSS过渡动画来实现平滑的文本位移+新内容淡入的效果，完全贴合你想要的那种自然感。

核心思路 #

直接切换display: none/block没法做动画，因为元素会瞬间从文档流中消失/出现。咱们换成用**opacity控制可见性**+transform控制位移，配合CSS的transition属性实现平滑过渡，再用JS切换类来触发动画状态，这样就能实现你要的移动+淡入组合效果了。

修改后的完整代码 #

HTML结构（微调布局，方便动画控制）

<div class="text-container">
  <a class="primary" id="about" onclick="show();">text 1 </a>
  <a class="secondary" id="email">more text</a>
</div>

CSS样式（动画逻辑核心）

.text-container {
  text-align: center;
  display: inline-flex; /* 让两个文本在同一行对齐布局 */
  align-items: center;
  gap: 8px; /* 可选：控制两个文本的初始间距 */
}

.primary {
  /* 给主文本添加位移过渡动画 */
  transition: transform 0.3s ease;
}

.secondary {
  /* 默认隐藏状态：完全透明+向右偏移 */
  opacity: 0;
  transform: translateX(10px);
  /* 淡入+归位的过渡动画配置 */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 激活状态：显示文本并回到正常位置 */
.secondary.active {
  opacity: 1;
  transform: translateX(0);
}

/* 主文本位移状态：向左移动对应距离 */
.primary.shifted {
  transform: translateX(-10px);
}

JS逻辑（用类切换代替display操作）

// 先获取目标元素
const primaryText = document.querySelector(".primary");
const secondaryText = document.querySelector(".secondary");

function show() {
  // 切换类来触发动画（点击一次显示，再点一次隐藏）
  primaryText.classList.toggle("shifted");
  secondaryText.classList.toggle("active");
}

可自定义的细节 #

• 动画时长：修改transition里的0.3s可以调整动画快慢，比如改成0.4s会更平缓
• 位移幅度：调整translateX()的像素值，比如改成15px会让位移更明显
• 动画曲线：把ease换成ease-in-out，可以让动画的开始和结束阶段更柔和
• 单次触发：如果只需要点击一次显示（不需要隐藏），把classList.toggle改成classList.add就行

这样改完之后，点击"text 1"时，主文本会向左平滑移动，同时"more text"从右侧淡入出现，完全匹配你想要的示例效果~

内容的提问来源于stack exchange，提问作者parsley3392