工作里提取开源了一个 React 导航栏组件，再写个有点气质的主页搭配宣传

[wsWmsw]

受到一些 UI 库（ Radix Primitives ）和品牌官网（ Apple ）的导航栏组件的启发，再加上工作里有接二连三开发新站点的需求，就有了不停打磨站点导航栏组件的机会，现在这个组件已经开源了：navbar-153。一周之后离职，求职中，后面的数字是为了纪念这段时间的工作，每天乘坐的公交车线路号。

组件有流畅的过渡动画，而且组件也有一些独特的特性，例如可以完全键盘访问，可以通过辅助设备（ TalkBack 、VoiceOver ）访问，以及完全自定义样式。未来会加入更多和可访问性有关的特性，例如支持关闭动画，可能也会支持纵向布局。

组件写完之后又用 Next.js 简单开发了一个主页，黑灰主色调，搭配还算协调，结合了玻璃、扁平和阴影风格，有些岩石或深空的感觉。

如果有正在搭建应用的 V 友，欢迎使用这款导航栏～及时反馈及时改善。

• 主页地址：https://wswmsword.github.io/examples/navbar-153/
• 仓库地址：https://github.com/wswmsword/navbar-153

[codehz]

存在动画 bug ，虽然并不影响使用，选择一个短的项目，然后快速双击一个长的项目，这样两个动画（消失/切换）就会同时运行，使得最终消失前结束位置出现错误

[wsWmsw]

请问“短的项目”说的是导航栏的触发器按钮的长度吗？
在组件主页的导航栏里有个叫 `Postcss-Mobile-Forever` 的触发器按钮，这个按钮文字的 `Postcss-` 被我用 `<span>` 包起来，用来在窄屏上隐藏节约空间，结果在我的组件源码里是用触发器本身来判断当前点击的序列，没有判断触发器的子元素 `<span>`，就导致点击失效了==这个我刚修好，但是还没发版，主页上的例子已经更新没这个问题了。
如果你碰到的不是这个问题，确实是结束位置错误的话，方便再详细点吗，或者 GitHub 上提个 issue 我看下截图～我没有复现出来，不过我知道另一个问题还没修复，是在切换动画快结束的时候立即点击关闭，收起的动画可能不会出现。

[wsWmsw]

@codehz 最近重新整理重构了动画的部分，应该修复了吧，欢迎再看看啊～

改名了，hanav ，体验链接： https://wswmsword.github.io/examples/hanav/