询问指定GIF中的菜单动效名称及具体实现逻辑

动效名称 #

这个动效通常被称为侧边导航平滑跟随指示器动效，属于菜单活跃状态平滑过渡效果的一种，广泛应用于各类后台系统、APP的侧边导航交互设计中。

实现原理 #

整个动效分为侧边栏展开收起、指示器平滑跟随两个核心部分，核心依赖CSS过渡属性实现流畅的动画效果：

• 侧边栏展开收起实现
  侧边栏默认处于收起状态，仅展示菜单图标；点击展开按钮后，通过transition属性控制侧边栏宽度、菜单文字的透明度和位移属性同步变化，在设定的过渡时长内平滑完成状态切换，展开后同步显示所有菜单的文字内容。
• 指示器平滑跟随实现
  1. 在侧边栏容器内预先插入一个独立的高亮指示器元素（即动效里的绿色竖条），默认通过绝对定位放在首个选中菜单项的左侧位置
  2. 给所有菜单项绑定点击事件，选中项变更时，先移除其他菜单项的选中状态，给当前选中项添加选中样式
  3. 获取当前选中菜单项距离侧边栏顶部的偏移高度，通过transform: translateY()属性将指示器移动到对应位置，配合transition属性实现滑动过渡效果
  4. 同步给菜单文字、图标的颜色变更添加过渡效果，和指示器的动效节奏保持一致，整体视觉会更统一流畅

核心代码示例 #

/* 侧边栏基础样式 */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 80px; /* 收起状态宽度，仅展示图标 */
  transition: width 0.3s ease;
  overflow: hidden;
}
/* 侧边栏展开状态 */
.sidebar.expand {
  width: 240px; /* 展开后宽度，适配图标+文字 */
}
/* 菜单项样式 */
.menu-item {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 24px;
  color: #666;
  transition: color 0.2s ease;
  cursor: pointer;
}
.menu-item.active {
  color: #2ecc71;
}
.menu-item-text {
  margin-left: 16px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.sidebar.expand .menu-item-text {
  opacity: 1;
}
/* 指示器样式 */
.indicator {
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 56px;
  background-color: #2ecc71;
  transition: transform 0.3s ease;
}

// 核心逻辑示例
const sidebar = document.querySelector('.sidebar')
const toggleBtn = document.querySelector('.toggle-btn')
const menuItems = document.querySelectorAll('.menu-item')
const indicator = document.querySelector('.indicator')

// 侧边栏展开收起切换
toggleBtn.addEventListener('click', () => {
  sidebar.classList.toggle('expand')
})

// 菜单选中和指示器跟随
menuItems.forEach((item, index) => {
  item.addEventListener('click', () => {
    // 切换选中状态
    menuItems.forEach(i => i.classList.remove('active'))
    item.classList.add('active')
    // 计算指示器位移距离，移动到当前选中项位置
    const offsetTop = item.offsetTop
    indicator.style.transform = `translateY(${offsetTop}px)`
  })
})

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