一个月的时间,今天完成了 hanav 功能版本的迭代。欢迎在线体验、在线编辑~
之前的版本里,hanav 在完整性上有很大的提升。hanav 经历了重构,内部变得井井有条,使用 hanav 的时候,支持了按需导入;动画方面支持了 x 轴和 y 轴动画的自定义,同时统一了动画参数,有良好开发体验;最后响应式设计方面,添加了专为移动端设计的迷你模式组件。
这一次的更新,焦点放到了动画的实现和开发体验,是一次完整性的优化。
动画实现方面进行了动画部分的重构,明确了动画的过程逻辑,修复了一系列动画 bug,让动画更可靠:
- 修复展开动画结束瞬间,无法触发收起动画;
- 修复外部状态变化导致动画失效;
- 修复 Chrome 节能模式下的动画错误;
- ……
动画遵循这样的逻辑:装载 dom > 获取尺寸 > 初始样式设定 > tick(等事件循环)> 入场动画设定。
新版本里,上面的 tick 阶段使用 requestAnimationFrame
代替了 setTimeout
,更明确地表示在下一阶段前,浏览器已完成初始样式的渲染。
除了动画,其它便是开发体验优化和少量功能添加。新版本里,添加了 <Head>
和 <Tail>
用于声明式地包裹可聚焦元素,而不用像之前的版本,通过 render prop 的参数赋值给 ref
:
// before
<Item>
{(p, head, tail) => <div {...p}>
<a ref={head}>React</a> vs
<a>Vue</a> vs
<a ref={tail}>Angular</a>
</div>}
</Item>
// after
<Item><div>
<Head><a>React</a></Head> vs
<a>Vue</a> vs
<Tail><a>Angular</a></Tail>
</div></Item>
最后就是一些动画进度回调的添加,包括菜单展开前、展开后、收起前、收起后的钩子,有了这些钩子,可以在菜单展开时展示灰色蒙层。
hanav 是一个 React 导航栏组件库,除了丝滑的动画,无障碍同样出色,亲自上手感受它们的魅力吧:
🎄 Happy Xmas
🎄🎄🎄🎄🌷