如何实现导航链接激活状态下的指示器展开效果？

一、HTML结构 #

先搭建基础导航结构，包含导航项和底部指示器元素：

<div class="nav-container">
  <div class="nav-item active">首页</div>
  <div class="nav-item">我的视频</div>
  <div class="nav-item">直播回放</div>
  <div class="nav-item">频道会员</div>
  <div class="nav-indicator"></div>
</div>

二、核心CSS实现 #

重点处理导航容器定位、导航项布局，以及指示器的初始状态和过渡动画：

.nav-container {
  position: relative;
  display: flex;
  gap: 24px;
  padding: 12px 16px;
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
}

.nav-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  color: #606060;
  transition: color 0.2s ease;
}

.nav-item.active {
  color: #000;
  font-weight: 500;
}

.nav-indicator {
  position: absolute;
  bottom: -1px; /* 对齐导航底部边框 */
  left: 0;
  height: 2px;
  width: 20px; /* 指示器初始宽度 */
  background-color: #ff0000;
  transform: translateX(0) scaleX(0); /* 初始状态：缩放到0 */
  transform-origin: left center; /* 以左侧为缩放原点，匹配YouTube动画方向 */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 使用YouTube同款缓动函数 */
}

三、JS控制逻辑 #

通过JS计算激活项的位置和宽度，动态调整指示器的translateX和scaleX值：

const navItems = document.querySelectorAll('.nav-item');
const indicator = document.querySelector('.nav-indicator');
let activeItem = document.querySelector('.nav-item.active');

// 页面加载时初始化指示器位置
updateIndicator(activeItem);

// 给每个导航项绑定点击事件
navItems.forEach(item => {
  item.addEventListener('click', () => {
    // 移除旧激活状态
    activeItem.classList.remove('active');
    // 设置当前项为激活状态
    item.classList.add('active');
    activeItem = item;
    // 更新指示器状态
    updateIndicator(item);
  });
});

// 核心计算函数：更新指示器的transform属性
function updateIndicator(item) {
  const itemLeft = item.offsetLeft;
  const itemWidth = item.offsetWidth;
  const indicatorWidth = indicator.offsetWidth;
  
  // translateX：激活项左侧偏移 + (激活项宽度 - 指示器初始宽度)/2，保证指示器居中对齐
  const translateX = itemLeft + (itemWidth - indicatorWidth) / 2;
  // scaleX：激活项宽度 / 指示器初始宽度，控制展开幅度（数值越大，指示器拉得越宽）
  const scaleX = itemWidth / indicatorWidth;
  
  indicator.style.transform = `translateX(${translateX}px) scaleX(${scaleX})`;
}

四、关键属性说明 #

• translateX(somevalue)：控制指示器的水平偏移量，计算时兼顾激活项的左侧位置和自身宽度差，确保指示器精准对齐激活项中心。
• scaleX(somevalue)：直接决定指示器的展开幅度，数值等于激活项宽度 ÷ 指示器初始宽度，比如初始宽度20px、激活项宽度100px时，scaleX设为5，指示器会被拉伸至与激活项同宽。
• transform-origin: left center：将缩放原点设为左侧，让指示器展开时从左向右拉伸，和YouTube的动画逻辑完全一致。

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