Articles on Smashing Magazine — For Web Designers And Developers
·
使用JavaScript和CSS创建“移动高亮”导航栏
💡
原文英文，约1700词，阅读约需7分钟。
📝
内容提要
本文介绍了两种使用JavaScript和CSS创建“移动高亮”导航栏的方法：第一种通过getBoundingClientRect方法实现边框动画，第二种利用View Transition API实现相同效果。这两种方法可为单页应用提供平滑的导航项切换体验。
🎯
关键要点
- 本文介绍了使用JavaScript和CSS创建“移动高亮”导航栏的两种方法。
- 第一种方法使用getBoundingClientRect方法实现边框动画。
- 第二种方法利用View Transition API实现相同效果。
- 这种导航模式使得活动导航项的边框在用户点击菜单项时平滑过渡。
- 初始HTML和CSS设置了标准导航栏和一个用于高亮的div元素。
- 通过绝对定位和动画效果，#highlight元素在导航栏中移动以创建所需效果。
- 添加点击事件处理程序以在用户更改.active导航项时触发高亮动画。
- 使用getBoundingClientRect获取活动导航项的位置和大小信息。
- View Transition API提供了在网站视图之间创建动画过渡的功能。
- 使用View Transition API时，可以直接使用伪选择器为.active导航项添加样式。
- 通过document.startViewTransition方法触发视图过渡，简化了代码。
- 为确保过渡期间边框高度一致，需要为::view-transition-old和::view-transition-new伪选择器声明显式高度。
- 最终实现了一个平滑过渡的导航栏，展示了现代JavaScript和CSS的强大功能。
❓
延伸问答
如何使用JavaScript和CSS创建移动高亮导航栏？
可以通过getBoundingClientRect方法或View Transition API来实现移动高亮导航栏。
getBoundingClientRect方法在移动高亮导航栏中有什么作用？
getBoundingClientRect方法用于获取活动导航项的位置和大小信息，以便动画边框平滑过渡。
View Transition API如何简化导航栏的动画效果？
View Transition API通过处理视图之间的动画过渡，减少了手动计算位置和大小的需求。
在实现移动高亮导航栏时，如何处理点击事件？
需要为导航栏添加点击事件处理程序，确保只有在点击非.active项时才更改.active类。
如何确保View Transition API中的边框高度一致？
需要为::view-transition-old和::view-transition-new伪选择器声明显式高度，以保持边框高度一致。
使用移动高亮导航栏的好处是什么？
这种导航模式提供了平滑的导航项切换体验，提升了用户界面的交互性。
➡️
