transition加了没反应，根本原因是缺少明确起始/结束状态或使用了不可过渡属性（如display、height:auto），必须显式定义可动画属性（如transform、opacity）并写在常态规则中。
transition类为什么加了没反应？
因为transition类本身只设置transition-property、transition-duration等 CSS 属性，它不触发任何状态变化。浏览器需要两个明确样式状态才能插值动画——比如从opacity-0到opacity-100，或从默认scale-100到hover:scale-110。
常见错误现象：
-
div上只写transition-all，悬停时毫无变化 - 用
hidden切block，以为能淡入——但display不可过渡 - JS 切换
h-0→h-auto，结果直接跳变
根本原因：没提供可动画的起点和终点，或者用了不可过渡的属性。
哪些属性真正能平滑过渡？
只有少数 CSS 属性被浏览器优化过，能 GPU 加速、无重排、插值稳定。Tailwind 默认启用的transition（等价于transition-colors duration-150）只覆盖颜色、边框、背景等安全项；想做缩放、位移、淡入，必须显式指定：
- ✅ 推荐：
transition-transform+hover:scale-105或transition-opacity+opacity-0/opacity-100 - ⚠️ 避免：
transition-width、transition-height（v3.0+ 已默认禁用），height: auto无法计算起始值，text-decoration根本不支持过渡 - ? 替代方案：菜单展开用
max-h-0→max-h-96，侧边栏折叠用max-w-[16rem]→max-w-[4rem]，并配overflow-hidden
duration和ease必须写在哪？
duration-300和ease-in-out这类类名，必须和transition-类共存于元素的**初始 class 列表中**，不能只放在hover:或active:后面。
否则鼠标移出瞬间会立刻跳回原状，毫无离开动画：
- ✅ 正确：
transition-transform duration-300 ease-in-out hover:scale-105 - ❌ 错误：
transition-transform hover:scale-105 hover:duration-300 - ❌ 错误：
duration-300单独写在元素上——没配任何transition-类，CSS 中不会生成transition-duration
移动端尤其要注意：hover在 iOS Safari 上延迟且不稳定，按钮反馈优先用active:scale-95，下拉菜单改用group-hover:包裹触发区。
transition-all 是个高风险 shortcut
transition-all看似省事，实际容易引发卡顿或意外抖动——它会连box-shadow、filter、background-image一起动，而这些属性往往触发重绘甚至重排。
更隐蔽的问题是：当 JS 动态更新多个样式（比如同时改padding、color、opacity），transition-all会让所有变更都套上相同缓动，破坏设计意图。
- ✅ 推荐：明确写
transition-transform duration-300，再配合will-change: transform（仅对频繁动画的元素） - ✅ 路由切换场景：用
transition-all duration-500可以，但必须确保容器有overflow-hidden，且目标元素带position: relative或absolute - ⚠️ 注意：
transition-none可用于禁用某次动态更新的过渡（如表单提交瞬间不想动效）
真正难的不是写对类名，而是判断「这个状态变化是否值得动效」——很多交互加了过渡反而干扰用户节奏，比如快速翻页或高频开关。动效不是越多越好，而是该动时才动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
