如何实现标签页切换时，当前内容div先淡出再加载下一部分内容？

你最初推演的转场逻辑方向完全正确，卡点仅在于原实现通过display属性做显隐切换——这个属性的状态变化不会触发任何CSS过渡/动画，旧内容根本没有播放淡出效果的载体，只会瞬间消失。

实现调整方案 #

1. 调整CSS规则 #

放弃原来“内容一显示就自动播淡入动画”的写法，改用状态类控制透明度过渡，转场时长统一设为300ms（可按需自行调整）：

/* 原有tab导航、按钮样式全部保留，仅修改tabcontent相关规则 */
.tabcontent {
  /* 初始状态：不可见、透明度为0，预留平滑过渡效果 */
  visibility: hidden;
  opacity: 0;
  padding: 6px 12px;
  transition: opacity 300ms ease, visibility 300ms ease;
}
/* 旧内容淡出状态：可见但透明度逐步降为0 */
.tabcontent.is-hiding {
  visibility: visible;
  opacity: 0;
}
/* 新内容淡入状态：透明度从0逐步升到1，最终保持可见 */
.tabcontent.is-showing {
  visibility: visible;
  opacity: 1;
}

补充说明：如果使用绝对定位布局内容区需要额外调整位置，也可以保留display属性做占位控制：在JS转场的最后一步，把旧内容设为display: none、新内容设为display: block，再触发透明度过渡，避免切换时出现布局抖动。

2. 重写JS切换逻辑 #

核心流程严格按照「旧内容淡出→新内容淡入」的顺序执行，避免新旧内容同时占用页面空间：

// 转场时长和CSS里的transition值保持一致，方便统一修改
const TRANSITION_DURATION = 300;

function openCity(evt, cityName) {
  const tablinks = document.getElementsByClassName("tablinks");
  // 找到当前正在展示的内容块
  const activeContent = document.querySelector(".tabcontent.is-showing");
  const targetContent = document.getElementById(cityName);

  // 点击当前已激活的标签时，直接返回不重复触发转场
  if (targetContent === activeContent) return;

  // 同步切换标签按钮的激活状态
  for (let i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  evt.currentTarget.className += " active";

  // 首次加载默认标签时，没有旧内容需要淡出，直接展示目标内容
  if (!activeContent) {
    targetContent.classList.add("is-showing");
    return;
  }

  // 第一步：给旧内容加淡出状态，触发透明度从1降到0的过渡
  activeContent.classList.remove("is-showing");
  activeContent.classList.add("is-hiding");

  // 第二步：等淡出动画完全走完，再移除旧内容的淡出状态，给新内容加淡入状态
  setTimeout(() => {
    activeContent.classList.remove("is-hiding");
    targetContent.classList.add("is-showing");
  }, TRANSITION_DURATION);
}

// 初始化默认展示标签的逻辑和原实现完全一致
document.getElementById("defaultOpen").click();

效果说明 #

• 转场全程连贯：旧内容平滑降低透明度完全消失的瞬间，新内容才开始向上淡入，没有生硬的跳变
• 无冗余触发：点击当前已经激活的标签时不会重复播放转场动画
• 维护成本低：所有转场时长只需要同步修改JS常量和CSS过渡值，就能适配不同的交互节奏

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