这是一个创建于 156 天前的主题，其中的信息可能已经有所发展或是发生改变。
受到一些 UI 库（ Radix Primitives ）和品牌官网（ Apple ）的导航栏组件的启发，再加上工作里有接二连三开发新站点的需求，就有了不停打磨站点导航栏组件的机会，现在这个组件已经开源了：navbar-153。一周之后离职，求职中，后面的数字是为了纪念这段时间的工作，每天乘坐的公交车线路号。
组件有流畅的过渡动画，而且组件也有一些独特的特性，例如可以完全键盘访问，可以通过辅助设备（ TalkBack 、VoiceOver ）访问，以及完全自定义样式。未来会加入更多和可访问性有关的特性，例如支持关闭动画，可能也会支持纵向布局。
组件写完之后又用 Next.js 简单开发了一个主页，黑灰主色调，搭配还算协调，结合了玻璃、扁平和阴影风格，有些岩石或深空的感觉。
如果有正在搭建应用的 V 友，欢迎使用这款导航栏～及时反馈及时改善。
2 条回复
 |
1
codehz 156 天前 via iPhone
存在动画 bug ，虽然并不影响使用，选择一个短的项目，然后快速双击一个长的项目，这样两个动画（消失/切换）就会同时运行，使得最终消失前结束位置出现错误
|
 |
2
wsWmsw OP 请问“短的项目”说的是导航栏的触发器按钮的长度吗？
在组件主页的导航栏里有个叫 `Postcss-Mobile-Forever` 的触发器按钮，这个按钮文字的 `Postcss-` 被我用 `<span>` 包起来，用来在窄屏上隐藏节约空间，结果在我的组件源码里是用触发器本身来判断当前点击的序列，没有判断触发器的子元素 `<span>`，就导致点击失效了==这个我刚修好，但是还没发版，主页上的例子已经更新没这个问题了。 如果你碰到的不是这个问题，确实是结束位置错误的话，方便再详细点吗，或者 GitHub 上提个 issue 我看下截图～我没有复现出来，不过我知道另一个问题还没修复，是在切换动画快结束的时候立即点击关闭，收起的动画可能不会出现。 |
Select Language