transition必须写在基础类中而非:hover里，否则移出时无动画；不可动画属性如display、height:auto等会导致过渡失效；js操作class或内联样式会覆盖transition声明；transition-all存在性能与兼容性风险。
transition类写在:hover里却只单向生效
鼠标悬停时有动画，移开时“啪”一下跳回原状——这不是动画坏了，是transition被塞进了:hover规则里。浏览器只在伪类激活时才“看到”这个声明，离开后上下文清空，自然没得过渡。
✅ 正确写法：.btn { transition: opacity 0.2s; } + .btn:hover { opacity: 0.7; }
❌ 错误写法：.btn:hover { opacity: 0.7; transition: opacity 0.2s; }
用 DevTools 的 Computed 面板确认 transition-property 是否始终存在，而不是只在 :hover 下亮起。
transition-target 属性本身不可动画
Tailwind 的 transition 类不保证所有属性都能动，它只是设置 CSS 的 transition-property。如果目标属性压根不支持插值，浏览器就静默忽略，不报错也不动。
-
display: none/display: block：离散状态，无法插值 -
height: auto：没有确定像素起点，浏览器算不出中间帧 -
background-image（含linear-gradient）：W3C 明确列为不可动画属性 -
z-index、position：本身不能过渡（但top/left可以）
替代方案：
– 显隐用 opacity-0 + visibility-hidden + pointer-events-none
– 高度展开用 max-h-0 → max-h-96，并配 overflow-hidden
JS 切换 class 后 transition 彻底失效
调用 el.classList.remove("hidden") 再 el.classList.add("shown")，等于把 transition 声明随旧类一起删掉了。浏览器重新计算样式时发现当前没 transition，只能硬切终态。
必须把过渡声明抽到一个永不被移除的基础类中：
.animatable { transition: opacity 0.3s, transform 0.25s; }.animatable--hidden { opacity: 0; transform: translateY(10px); }.animatable--shown { opacity: 1; transform: translateY(0); }
别在 JS 里直接写 el.style.opacity = "0"，这会覆盖 CSS 中的 transition 声明。
transition-all 看似省事，实则埋雷
transition-all 不是万能开关。它会让所有可变属性都尝试过渡，一旦遇到 display 或 height: auto 这类不可动画属性，整条 transition 声明会静默失效——不报错，也不提示。
更糟的是性能：它可能连 box-shadow、filter 一起过渡，导致卡顿或意外抖动。
推荐做法：
– 想缩放？用 transition-transform + hover:scale-110
– 想淡入？用 transition-opacity + opacity-0
– 想颜色变化？默认 transition-colors 就够用
最常被忽略的一点：transition 不是“加一次就永久生效”的开关，它是一份持续存在的样式契约——只要它不在计算样式里，动画就不存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
