如何为激活状态的选项卡在切换时添加移动过渡动画效果

核心思路 #

你当前的写法是直接给激活状态的span加背景样式，切换时是两个独立元素的样式切换，无法实现滑块跨元素平滑移动的效果。我们需要新增一个独立的滑块层，动态跟随激活项的位置和尺寸变化，配合过渡属性实现平滑动画。

步骤1：调整样式结构 #

首先修改原有CSS，移除激活span的背景、阴影样式，新增独立滑块的样式：

ul {
  display: flex;
  list-style-type: none;
  padding: 4px;
  margin: 0;
  background: #efefef;
  border-radius: 44px;
  position: relative; /* 给滑块提供定位父级 */
}

/* 独立滑块样式 */
.slider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 50px;
  background: #ffffff;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
  transition: all 0.5s ease; /* 过渡动画控制滑动效果 */
  z-index: 1;
}

li {
  position: relative;
  z-index: 2; /* 文字层级高于滑块，保证可见 */
}

li span {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 7px 16px;
  cursor: pointer;
  /* 可以加文字颜色的过渡，提升体验 */
  transition: color 0.3s ease;
}

li.active span {
  color: #000; /* 激活态文字颜色可自定义 */
}

li:not(.active) span {
  color: #666; /* 非激活态文字颜色可自定义 */
}

步骤2：调整HTML结构 #

在ul内部新增滑块元素：

<ul>
  <div class="slider"></div>
  <li class="active"><span>one</span></li>
  <li><span>two</span></li>
</ul>

步骤3：添加交互逻辑（React版本） #

在组件中监听激活项的变化，动态计算滑块的位置和宽度：

import { useEffect, useRef, useState } from 'react';

const Tabs = () => {
  const [activeIndex, setActiveIndex] = useState(0);
  const sliderRef = useRef(null);
  const tabsRef = useRef([]);

  // 激活项变化时更新滑块位置
  useEffect(() => {
    const activeTab = tabsRef.current[activeIndex];
    if (!activeTab || !sliderRef.current) return;
    // 获取激活tab的位置和宽度
    const { offsetLeft, offsetWidth } = activeTab;
    // 设置滑块样式
    sliderRef.current.style.left = `${offsetLeft}px`;
    sliderRef.current.style.width = `${offsetWidth}px`;
  }, [activeIndex]);

  return (
    <ul>
      <div ref={sliderRef} className="slider" />
      {['one', 'two'].map((text, index) => (
        <li
          key={index}
          ref={el => tabsRef.current[index] = el}
          className={activeIndex === index ? 'active' : ''}
          onClick={() => setActiveIndex(index)}
        >
          <span>{text}</span>
        </li>
      ))}
    </ul>
  )
}

如果需要调整滑动速度，直接修改.slider的transition时长参数即可，方案可适配任意数量的选项卡场景。

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