使用JavaScript与CSS创建"移动高亮"导航栏

使用JavaScript与CSS创建"移动高亮"导航栏

在本教程中,Blake Lundquist向我们展示了两种仅使用原生JavaScript和CSS创建"移动高亮"导航模式的技巧。第一种技术使用getBoundingClientRect方法在点击时显式动画导航栏项之间的边框。第二种方法使用新的View Transition API实现相同功能。

初始标记

我们假设有一个单页应用,内容更改时不会重新加载页面。起始HTML和CSS是标准的导航栏,额外添加了一个id为#highlight的div元素。我们给第一个导航项添加.active类。

html 复制代码
<nav>
  <div id="highlight"></div>
  <a href="#" class="active">Home</a>
  <a href="#services">Services</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</nav>

方法一:使用getBoundingClientRect

我们通过绝对定位#highlight元素在.active类元素周围创建边框,并添加过渡样式使元素位置和大小变化时产生渐变效果。

css 复制代码
#highlight {
  z-index: 0;
  position: absolute;
  height: 100%;
  width: 100px;
  left: -200px;
  border: 2px solid green;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

添加点击事件处理器,当用户更改.active导航项时动画高亮元素:

javascript 复制代码
const navbar = document.querySelector('nav');

navbar.addEventListener('click', function(event) {
  if (!event.target.matches('nav a:not(.active)')) {
    return;
  }
  
  document.querySelector('nav a.active').classList.remove('active');
  event.target.classList.add('active');
  moveHighlight();
});

使用getBoundingClientRect计算高亮元素的新位置和宽度:

javascript 复制代码
const moveHighlight = () => {
  const activeNavItem = document.querySelector('a.active');
  const highlighterElement = document.querySelector('#highlight');
  
  const width = activeNavItem.offsetWidth;
  const itemPos = activeNavItem.getBoundingClientRect();
  const navbarPos = navbar.getBoundingClientRect();
  const relativePosX = itemPos.left - navbarPos.left;

  const styles = {
    left: `${relativePosX}px`,
    width: `${width}px`,
  };

  Object.assign(highlighterElement.style, styles);
}

方法二:使用View Transition API

View Transition API提供了在网站视图之间创建动画过渡的功能。我们不再需要单独的#highlight元素,而是直接使用伪选择器样式.active导航项,让API处理UI状态变化时的动画。

css 复制代码
nav a::after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: none;
  box-sizing: border-box;
}

nav a.active::after {
  border: 2px solid green;
  view-transition-name: highlight;
}

触发过渡的JavaScript代码:

javascript 复制代码
navbar.addEventListener('click', async function(event) {
  if (!event.target.matches('nav a:not(.active)')) {
    return;
  }

  if (!document.startViewTransition) {
    setActiveElement(event.target);
    return;
  }
  
  document.startViewTransition(() => setActiveElement(event.target));
});

结论

网站UI状态之间的动画和过渡曾经需要大量外部库和复杂代码,但现在原生JavaScript和CSS已经包含了实现类原生应用交互的功能。我们通过两种方法演示了这一点:结合CSS过渡和getBoundingClientRect()方法,以及使用View Transition API。

资源

相关推荐
红苕稀饭6669 分钟前
RISE论文阅读
论文阅读·人工智能·计算机视觉
cxr8281 小时前
分享一个知识工程师单体智能体的简单提示词
人工智能·智能体·提示词工程·ai赋能·上下文工程
w0000061 小时前
图像分类项目
人工智能·分类·数据挖掘
扫地的小何尚2 小时前
NVIDIA Dynamo深度解析:如何优雅地解决LLM推理中的KV缓存瓶颈
开发语言·人工智能·深度学习·机器学习·缓存·llm·nvidia
张较瘦_5 小时前
[论文阅读] AI赋能 | 当AI看懂交通摄像头:多模态大模型零样本检测的实战报告
论文阅读·人工智能
cxr8285 小时前
BMAD框架实践:掌握story-checklist提升用户故事质量
前端·人工智能·agi·智能体·ai赋能
Dongsheng_20196 小时前
【汽车篇】AI深度学习在汽车零部件外观检测——机电轴承的应用
人工智能·深度学习·汽车
江瀚视野6 小时前
汽车价格战全面熄火了?不卷价格该卷什么?
人工智能·自动驾驶
资讯全球7 小时前
2025年智慧差旅平台推荐
人工智能
Jagger_7 小时前
掌握WBS:提升项目管理效率的实用指南
aigc·openai·ai编程