集思广益

欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论

提问

1. 如何实现默认显示git的第一帧图片，当鼠标经过时，播放完整的gif动画
2. 你在使用calc过程中遇到过哪些坑？如何解决？
3. 说说你对堆栈跟踪的理解

早餐

如何实现默认显示git的第一帧图片，当鼠标经过时，播放完整的gif动画

回答：

思路1

我想到的方式之一，是手动拆帧，通过mac自带的图片浏览器，导出第一帧作为封面背景，然后将gif图片设置透明度为0，当鼠标经过的时候，将其透明度设置为100%，就会视觉效果上自动播放；

思路2

求JYM们献策

中餐

你在使用calc过程中遇到过哪些坑？如何解决？

这里先做个介绍：

css3的calc()函数允许我们在属性值中执行数学计算操作。例如，我们可以使用calc()指定一个元素宽度的固定像素值为多个数值的和。

calc(表达式)

• 表达式支持加、减、乘、除运算，同时也支持单位的混合使用（%、px、rem、em等）；
• 表达式中有”+”、”-“运算符的，前后必须要有空格，这个是向前兼容，后期可能会带入变量等有”-“连字符；
• 虽然“*”“/”没有空格可以运算，但是为了保持格式上的统一，一般加空格。

坑一：

+-符号之间一定要写空格

width: calc(100%-50px); // 失效
width: calc(100% - 50px); // 正确的写法

坑二：

calc是css3中增加的一个自动计算长度的方法，而在less中，less的运算方式会和calc发送冲突。可以写成： width: calc(~'100% - 60px');

坑三：

加减是必须都带相同单位或百分比与一个带单位 width: calc(100% - 10px);

坑四：

乘除是只能有一个带单位 不能除0

height: calc(30px / 3); 
width: calc(20% - 10px);

坑五：

JYM有什么坑洼呢？

晚餐

如何保证团队内部一致的代码风格

我说说我们团队 针对Vue3框架的方案就是ESLint+Prettier,一键保存+自动格式化 具体可看Vue3.2: 记Vite+ESLint与Prettier项目搭建实用配置

至于Git的规范可看之前我的总结： Git: 说说我们的版本控制^o^实用干货篇

欢迎分享你们的团队代码风格方案