tailwind的transition类需配合状态变化才生效，单独使用无效；必须定义起始与结束样式（如hover:text-blue-500），并确保过渡属性匹配（如transform需transition-transform），避免滥用transition-all或误用不可过渡属性。
transition类默认不生效，必须配合状态变化
Tailwind 的 transition 类本身只是设置 transition-property、transition-duration 等 CSS 属性，它不会自动触发动画——必须有实际的样式变更（比如 hover、focus、JS 切换 class）才能看到过渡效果。
常见错误现象：div transition-all 单独写在元素上，鼠标悬停却没反应。原因就是没定义“从哪变到哪”。
- 正确用法是组合状态类，例如：
transition-colors hover:text-blue-500 - 若用 JS 控制，确保切换的是可触发过渡的属性（如
opacity、transform、color），避免对display或height（未设初始值时）硬切 -
transition-none可用于禁用某次动态更新的过渡（比如表单提交瞬间不想动效）
transition-property 选错会导致动画“看不见”
Tailwind 默认的 transition（等价于 transition-colors duration-150）只监听颜色、背景、边框、文本装饰等有限属性。如果想过渡 transform 或 opacity，必须显式声明：
- 用
transition-transform+hover:scale-110才能缩放有动画 - 用
transition-opacity+opacity-0切换才淡入淡出 - 贪方便写
transition-all虽然省事，但会过渡所有可变属性（包括意外触发的box-shadow、filter），可能卡顿或行为不可控 - 某些属性（如
height、width）无法直接过渡，需改用max-height配合overflow-hidden模拟展开收起
duration 和 timing-function 不匹配会让动效“突兀”
Tailwind 把常用时长固化为 duration-75、duration-100…duration-500，但默认 easing 是 ease-in-out。很多 UI 动效需要更精细控制：
- 按钮点击反馈适合短促有力：
duration-75 ease-out - 模态框入场适合缓入缓出：
duration-300 ease-in-out - 下拉菜单推荐缓入快出：
duration-200 ease-in（入场）+duration-150 ease-out（收起） - 注意：Tailwind 不提供
ease-in或ease-out的独立 class，得用ease-in这种原生值配合transition类，或自定义插件扩展
响应式过渡和媒体查询容易被忽略
过渡效果在小屏下可能显得拖沓，或在触屏设备上误触发（比如伪 :hover）。不能只写一套 class：
- 移动端慎用
hover触发动效，可用group+group-focus配合 tabindex 实现键盘/触摸双支持 - 用
md:transition-transform在中屏以上才启用缩放，避免手机端误操作放大 - 深色模式切换时，若同时改
background-color和color，记得用transition-colors，否则颜色跳变 - 动画帧率敏感场景（如滚动中浮层），加
will-change-transform提前提示浏览器优化，但别滥用——它会强制图层提升，增加内存开销
真正难的不是写对几个 class，而是判断哪个属性该过渡、在什么条件下过渡、以及用户是否真需要这次动画。动效一旦加错地方，比没有还干扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
