🎉 hanav 2.2.1,更丝滑的动画体验

7 阅读2分钟

一个月的时间,今天完成了 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

🎄🎄🎄🎄🌷