网站文本切换动画实现求助：类似CSS Transition的文本过渡效果

问题 #

网站数据展示区域通过按钮加载新数据，仅修改<span>内文本，但直接修改的效果单调，想要实现旧文本侧移消失、新文本从另一侧移入的过渡动画。当前用jQuery直接修改文本的代码：

$("#span-1").text("new text");

尝试过切换过渡类但无效，相关代码：
CSS：

.text {
    transition: all 1s ease;
    /* other properties */
}

.text-transition {
    transition: all 1s ease;
}

JS：

$("#span-1").text("New Text");
$("#span-1").removeClass("text");
$("#span-1").addClass("text-transition");
setTimeout(() => {
    $("#span-1").removeClass("text-transition");
    $("#span-1").addClass("text");
}, 1000);

解决方案 #

直接修改单元素文本无法触发过渡，因为文本内容变化不属于CSS过渡可监控的属性。需要用双层容器+CSS过渡实现动画，核心思路是让旧文本移出视野，同时新文本移入，完成后替换文本并重置状态。

实现代码 #

HTML结构

把原span改成带容器的结构，容器负责限制显示区域，内部两个span分别承载新旧文本：

<div class="text-container">
  <span class="text-item active">旧文本</span>
  <span class="text-item">新文本</span>
</div>
<button id="load-data">加载新数据</button>

CSS样式

设置容器溢出隐藏，给文本项添加定位和过渡属性，定义移入移出的状态：

.text-container {
  position: relative;
  overflow: hidden;
  /* 可根据需求设置宽高、行高 */
  width: 200px;
  height: 30px;
  line-height: 30px;
}

.text-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all 0.6s ease;
  opacity: 0;
  transform: translateX(100%);
}

.text-item.active {
  opacity: 1;
  transform: translateX(0);
}

.text-item.out {
  opacity: 0;
  transform: translateX(-100%);
}

jQuery逻辑

点击按钮时，先让旧文本执行移出动画，同时显示新文本的移入动画，动画结束后更新文本内容并重置状态，方便下一次切换：

$("#load-data").on("click", function() {
  const container = $(".text-container");
  const activeItem = container.find(".text-item.active");
  const inactiveItem = container.find(".text-item:not(.active)");
  const newText = "加载的新数据" + Math.floor(Math.random() * 100); // 模拟新数据

  // 旧文本移出，新文本移入
  activeItem.addClass("out").removeClass("active");
  inactiveItem.text(newText).addClass("active").removeClass("out");

  // 动画结束后，交换文本并重置类，避免DOM元素冗余
  setTimeout(() => {
    activeItem.text(newText).removeClass("out");
    inactiveItem.removeClass("active");
  }, 600); // 时间对应CSS过渡时长
});

说明 #

1. 容器设置overflow: hidden确保文本移出后不可见
2. 两个文本项通过active和out类控制显示状态和位置
3. 动画结束后重置文本和类，保证每次切换都能重复利用这两个元素

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