transition 过渡动画出现抖动的问题

问题：

        最近在系统右下角加了一个智能客服的图标，用于接入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 属性应用过渡效果时，只有颜色的变化会被平滑处理。由于颜色变化不涉及元素的位置或大小变化，因此不太可能引起布局的重排或重绘，从而避免了抖动。