纯CSS实现Flex布局下标签项的Tab滑动动画是否可行？

完全可以不依赖JS实现不定宽响应式Tabs的滑动指示器动画，且满足仅使用纯SCSS/CSS、无内联样式、无CSS in JS的要求，以下是两种可行实现方案：

方案1：高兼容实现（适配所有主流浏览器） #

该方案无需依赖CSS新特性，仅用基础选择器和过渡属性即可实现：

• 结构上采用input[type="radio"] + label的组合，隐藏单选框，通过label触发单选框的checked状态，天然支持状态切换无需JS介入
• 利用SCSS的循环指令批量生成对应数量标签的选择器规则，实际业务中标签页数量通常不超过10个，批量生成的代码量极低
• 所有动画通过transition控制指示器的left和width属性实现，浏览器会自动计算flex布局下的不定宽标签尺寸，无需手动获取宽度

示例SCSS代码：

.tabs {
  display: flex;
  position: relative;
  gap: 24px;
  padding-bottom: 6px;

  // 隐藏单选框
  input[name="tabs"] {
    display: none;
  }

  .tab-item {
    padding: 8px 0;
    cursor: pointer;
    flex-shrink: 0;
  }

  .tab-indicator {
    position: absolute;
    bottom: 0;
    height: 2px;
    background-color: #1677ff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  // 批量生成10个标签的规则，可根据业务需求调整数量
  @for $i from 1 through 10 {
    input:nth-of-type(#{$i}):checked ~ .tab-indicator {
      // 可根据实际布局的padding、gap调整计算规则
      left: calc(#{$i - 1} * 120px + #{$i - 1} * 24px);
      width: fit-content;
      min-width: 60px;
    }
  }
}

如果标签宽度差异较大，可以单独调整对应序号的选择器规则，成本极低。

方案2：现代浏览器实现（支持CSS :has伪类即可） #

2023年之后所有主流浏览器均已支持:has()伪类，用该方案代码量极低，无需批量生成规则：

• 直接通过:has()匹配当前激活的标签项，自动对齐指示器的位置和宽度，完全适配不定宽标签
• 无需修改HTML结构，React侧仅需要给激活的标签项加active类即可，无需任何额外JS逻辑

示例SCSS代码：

.tabs {
  display: flex;
  position: relative;
  gap: 24px;
  padding-bottom: 6px;

  .tab-item {
    padding: 8px 0;
    cursor: pointer;
  }

  .tab-indicator {
    position: absolute;
    bottom: 0;
    height: 2px;
    background-color: #1677ff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  @for $i from 1 through 10 {
    &:has(.tab-item:nth-of-type(#{$i}).active) .tab-indicator {
      left: calc(#{($i - 1) * 100% / 10} + #{$i - 1} * 24px);
      width: calc(100% / 10);
    }
  }
}

两种方案均完全符合纯SCSS实现的要求，没有使用任何内联样式或CSS in JS能力，适配flex布局的响应式不定宽标签场景。

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