工作中遇到的奇怪bug😂不吐不快(6)

前情提要

工作嘛，总有一堆烦心事；每天就是努力扮演一个情绪稳定的成年人。
然后在遇到奇奇怪怪的bug之后，总能一秒破功，让人抓狂，尤其是当bug实在是太智障的时候，让人不禁想问一句：“这尼玛都什么沙雕玩意儿？！”

⚠️在此绝不diss任何码农、攻城狮、程序猿。生活不易，头顶易秃，和气生财。

CSS渲染也让人下跪

最近的项目里面有个展示中奖名单的需求，要实现的效果就是，一行横向滚动中奖名单，当所有的名单展示完后，回到第一条重复展示。

基本实现思路就是动态计算当前的中奖名单有多少，如果中奖名单渲染之后的长度小于当前窗口的宽度就不滚动，如果大于当前窗口的宽度，就设置一个keyframes动画帧让它动起来。至于滚动的距离和动画时长也都是动态计算出来的，所以此处的css也是需要动态插入到页面中。因为考虑到未来可能一个页面存在多个横向滚动动画，所以给当前的css样式类加上一个uuid，最后再把这个类赋值给对应的元素，也就完成了动态插入样式并展示对应样式的需求。

把样式都已经写好了，基本也展示正常了，BUT！老是有个在加载的时候一定几率但是稳定复现的bug：css样式加载成功，元素上对应的类也赋值上了，一切都很美好，但就是没有动画。🤷‍

给我气的😠死搞死搞快两小时了

终于！看见了希望的曙光！
卧…和我的祖国~一刻也不能分隔~ (最近被这首歌洗脑了，真·章口就来)

原因是啥？

uuid。🐴🌶🔪👃

也不能算是它的错。或许是浏览器解释css的问题？或者是css命名方式的问题？
总之，表象是，把uuid直接作为类名的时候，有一定的几率它对应的css样式无效。
我把uuid前面再加上一个固定的字符串之后，bug消失了。😂

今天也是被代码按在地上摩擦的一天 or2