问题:
最近在系统右下角加了一个智能客服的图标,用于接入gpt。理想的效果是:原先显示30px的小图标,当鼠标悬浮时,图标就向左上方移动并且变大到1.5倍。
然鹅,效果并不稳定,有些时候会疯狂抖动,体验感不好。
解决方案:
查找了一下文档,发现是 transition 的属性设置问题。
导致抖动写法:
transition: all 0.3s linear;
修复后的写法:
transition: color 0.3s linear;
原因分析:
transition: all 0.3s linear; 的影响范围
当你使用 transition: all 0.3s linear; 时,你实际上是在告诉浏览器对元素的所有可过渡属性(如位置、大小、颜色、边框等)都应用这个过渡效果。这包括了你用于改变图标位置和大小的CSS属性(如 transform 或 margin 用于移动,width 和 height 或 transform: scale() 用于改变大小)。 如果图标在移动或改变大小时,其位置或大小的计算结果有微小的变化(可能是由于布局的重排或重绘),这些变化会在每次过渡帧中重新计算,并可能导致不稳定的动画效果,即抖动。
transition: color 0.3s linear; 的影响范围
当你仅对 color 属性应用过渡效果时,只有颜色的变化会被平滑处理。由于颜色变化不涉及元素的位置或大小变化,因此不太可能引起布局的重排或重绘,从而避免了抖动。