transition必须写在常态选择器里，否则:hover移出时因过渡上下文清空导致跳变；正确做法是默认状态声明transition，:hover仅修改属性值，并配合overflow:hidden、transform-origin、pointer-events防抖及offsetwidth强制重排。
transition 必须写在常态选择器里，不能只塞进 :hover
鼠标快速划过时“抽搐”或“跳变”，八成是因为 transition 被错误地写在了 :hover 规则中。浏览器一移出，规则失效，过渡上下文直接清空，结果就是进有动画、出直接跳。
正确做法是把 transition 声明放在元素的默认状态里，:hover 只负责改目标值：
.card {
transform: scale(1);
transition: transform 0.25s ease-out, opacity 0.15s ease-out;
}
.card:hover {
transform: scale(1.05);
opacity: 0.95;
}
-
transition只需声明一次，且必须在常态下（否则离开时无过渡可回退） - 进和出共用同一套时长与缓动，避免“进快出慢”或“进慢出快”的节奏断裂
- 别用
all：写成transition: all 0.3s会让border-color、font-size等意外属性也参与过渡，放大抖动风险
高频进出前必须主动中断进行中的 transition
transitionend 在快速连续触发时大概率不触发——比如鼠标在导航项间毫秒级划过，中间几次 hover 根本没走完，事件监听就丢了。不能依赖它清理状态，它只是“完成通知”，不是“中断钩子”。
真正可靠的中断方式，是用 offsetWidth 强制重排：
element.addEventListener('mouseenter', () => {
element.offsetWidth; // 强制同步布局计算，打断当前 transition
element.classList.add('is-hovered');
});
- 每次新交互开始前调一次
element.offsetWidth，轻量且 100% 生效 - 即使元素已处于目标态，
offsetWidth仍会触发重排，为下一次样式变更建立全新起始快照 - 不要用
getComputedStyle或clientHeight替代——它们不一定触发重排，offsetWidth是最稳的选择
缩放/悬停抖动常因 transform-origin 和 overflow 配合失当
缩放抖动不全是 transition 的锅。如果父容器没设 overflow: hidden，或 transform-origin 没对齐内容重心，快速进出时像素对齐错乱，就会视觉“闪烁”。
以 .ChoseContainer 为例：
.ChoseContainer {
transform-origin: center center;
transition: transform 0.2s ease;
overflow: hidden; /* 关键：防止缩放溢出引发重绘抖动 */
}
.ChoseContainer:hover {
transform: scale(1.1);
}
-
transform-origin显式设为center center，避免默认值在不同浏览器中解析不一致 - 父容器（如
.Container）必须加overflow: hidden，否则缩放超出部分会触发额外合成层切换 - 若内容含图片或字体加载未完成，缩放中尺寸微变会强制重排——给
img加固定width/height可规避
防抖 + pointer-events 控制比纯 CSS 更可靠
纯 CSS 对毫秒级进出无能为力。JS 层介入不是“过度设计”，而是必要补位。
简单有效的组合策略：
let hoverTimer;
element.addEventListener('mouseenter', () => {
clearTimeout(hoverTimer);
hoverTimer = setTimeout(() => {
element.style.pointerEvents = 'none';
element.classList.add('is-hovered');
requestAnimationFrame(() => {
element.style.pointerEvents = 'auto';
});
}, 50);
});
-
50ms是平衡点：足够过滤抖动，又低于人类感知延迟阈值 - 动画中临时禁用
pointer-events，防止鼠标进出堆积触发多次状态切换 - 不用
display: none切换来“重置”——它不可插值，transition根本不启动；改用opacity: 0+visibility: hidden
真正难调的不是怎么写 hover，而是让浏览器“愿意配合”——它只对 transform 和 opacity 开绿灯，其他属性都是红灯区。高频区域不加 JS 防控，光靠 CSS 就是纸上谈兵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
