⭐️ 粤康码黄了 / 手写抽屉组件与性能优化

2022-11-22

今天一大早正准备上公交车,结果发现自己的粤康码「黄」了!好家伙,还好没有上车,不然就有可能被司机叼一顿,以及被其他乘客鄙夷的眼神看着了...

昨天就开始禁止坦洲镇通行珠海市了,而我恰好在周六的时候去了亲戚家,并且昨天(周一)没有做核酸,虽然上面提示的赋码场所是在公司附近,但其他同事貌似表示自己并没有出现黄码。去了亲戚家是较为可能的原因。

黄码第一件事,就是上微信搜索附近核酸点,有哪里是设有黄 🐎 通道的,我骑车前往附近最近的一个采样点,与普通大规模不同的是采用了一人一管的方式,而并非混检了。

还好人不多,赶在 10 点左右到家了,遂申请远程办公。今天的任务也是继续完成字幕相关需求,其中移动端的界面还是个大坑,不想重置组件库样式的我选择了手写部分基础组件。想着能不能在增设动画的同时,保留一定的性能(如果抽屉组件从未弹出过,则不渲染组件的内容,减少状态改变后重渲染的开销)。

想要让它默认不渲染就简单,内设一个状态控制就行。唯独动画并不是那么的容易,虽然使用了 CSS 控制 transform 实现从右侧到左侧的过渡,但由于组件首次显示前不会挂载 DOM,最终会以特别僵硬的效果瞬间出现。因为「动画激活类名」的设置是同组件 visible 属性改变后一起加上去的,也就是说 DOM 还没显示出来之前,就已经(几乎)同时把激活的类名设置上去了。

目前我想到的方案是使用 requestAnimationFrame 或者是 setTimeout,但这仅仅还是猜想,希望后续可以用上最简单的成本,来实现这个性能优化的效果吧。

Windy Hill 多云 无聊
概览页 时间轴
奇趣音乐盒 技术源于 Kico Player
Emmm,这里是歌词君