使用JavaScript和CSS创建"动态高亮"导航栏在本教程中，Blake Lundquist将带领我们使用纯JavaScript和CSS实现"动态高亮"导航模式的两种方法。第一种技术使用getBoundingClientRect方法，在导航栏项目被点击时显式地动画化边框。第二种方法使用新的View Transition API实现相同的功能。
初始标记假设我们有一个单页面应用，内容变化时页面不会重新加载。起始的HTML和CSS是标准的导航栏，额外包含一个id为#highlight的div元素。我们给第一个导航项添加.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导航项时产生动画效果。让我们为nav元素添加点击事件处理程序：
代码语言：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');
});移动高亮功能使用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对于这种方法，我们不再需要单独的#highlight元素：
代码语言：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;
}使用startViewTransition方法触发过渡：
代码语言：javascript复制navbar.addEventListener('click', async function (event) {
if (!event.target.matches('nav a:not(.active)')) {
return;
}
document.startViewTransition(() => {
document.querySelector('nav a.active').classList.remove('active');
event.target.classList.add('active');
});
});调整视图过渡为了解决尺寸不一致问题：
代码语言：css复制::view-transition-old(highlight) {
height: 100%;
}
::view-transition-new(highlight) {
height: 100%;
}最终代码重构添加回退支持：
代码语言：javascript复制const setActiveElement = (elem) => {
document.querySelector('nav a.active').classList.remove('active');
elem.classList.add('active');
}
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状态之间的动画和过渡曾经需要大量外部库和复杂代码，但现在vanilla JavaScript和CSS已经包含了实现类原生应用交互的功能。我们通过两种方法演示了这一点：使用CSS过渡结合getBoundingClientRect()方法，以及使用View Transition API。
资源getBoundingClientRect()方法文档View Transition API文档Jake Archibald的"视图过渡：处理宽高比变化"