应将transition声明置于基础选择器而非:hover中，否则移出时因样式丢失导致回弹；需统一颜色格式、强制读取计算样式、主动清理过渡状态以解决冲突与失效问题。
transition写在:hover里导致离开时失效
鼠标移开后动画“啪”一下回弹，不是动画中断，而是根本没触发反向过渡——因为transition只存在于:hover规则中。一旦离开，浏览器计算样式时transition声明已消失，直接跳回初始值。
常见错误写法：.btn:hover { background-color: #007bff; transition: background-color 0.3s ease; }
正确做法是把transition放在基础选择器上：.btn { transition: background-color 0.3s ease; } .btn:hover { background-color: #007bff; }
用 DevTools 的 Computed 面板检查transition-property是否始终存在，而不是只在:hover激活时才出现。
多次快速进出触发过渡冲突
连续 hover / 移出时，元素常卡住、抽搐或停在中间态。这不是 bug，是浏览器不取消进行中的过渡，新样式直接覆盖旧状态，导致插值错乱。
- 每次属性变化都会触发新的过渡，但旧过渡未结束，时间线打架
-
transitionend事件可能根本不触发（比如 class 被立刻移除） - 解决关键：主动监听 + 清理，不能依赖浏览器自动调度
推荐在mouseleave时先设el.style.transition = 'none'，再同步改值，下一帧再恢复transition并设目标样式。
background-image 或 color 等属性过渡失败
background-image默认不可过渡，必须显式声明：transition: background-image 0.5s，否则切换就是瞬切。
颜色过渡也容易翻车：
-
#ff0000→rgba(255, 0, 0, 0.8)：十六进制无 alpha，无法线性混合 -
hsl(0, 100%, 50%)→rgb(255, 0, 0)：跨色彩模型，浏览器降级为跳变
统一用rgba()或hsla()，确保起始和结束值结构一致，例如：rgba(255, 0, 0, 1) → rgba(255, 0, 0, 0.7)。
新插入元素或 JS 动态切换类时过渡不触发
通过document.createElement添加的元素，即使有 class，第一次 transition 也可能不生效——浏览器没拿到明确的起始值。
原因包括：
- 初始样式缺失（如
opacity没在基础规则里设为1，而是靠继承） -
transition随 class 一起被classList.remove()移除，导致过渡链断裂 - DOM 插入后立即改样式，浏览器来不及建立过渡上下文
稳妥做法：把transition抽到永不被移除的基础类里；对新元素，先 append，再getComputedStyle(el).opacity强制读取一次，再设目标值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
