按钮悬停动画不触发需检查 transition 是否作用于正确属性，如 transform 需用 transition-transform，duration 必须写在常态元素上，且移动端 hover 不生效，应改用 active: 或 group-hover: 兼容。
按钮悬停动画不触发？检查 transition 是否作用于正确属性
Tailwind 的 transition 类默认只启用部分 CSS 属性的过渡（如 color、background-color、border-color、text-decoration-color、fill、stroke），**不包括 transform 或 opacity 等常用动效属性**。如果想让按钮缩放或淡入，必须显式指定：
-
transition-transform→ 触发transform变化（如scale、rotate） -
transition-opacity→ 触发透明度变化 -
transition-all→ 启用所有可动画属性（慎用，可能影响性能）
常见错误：写了 hover:scale-105 却没加 transition-transform，结果悬停时“跳变”而非平滑缩放。
duration 类写在哪？别只加在 hover 状态里
动画持续时间（如 duration-200）必须写在**常态（非 hover）元素上**，否则悬停时动画会立即生效、离开时却无过渡 —— 因为 Tailwind 不会自动给伪类反向补 duration。
- ✅ 正确：
transition-transform duration-300 hover:scale-105 - ❌ 错误：
transition-transform hover:scale-105 hover:duration-300（离开时无动画） - ⚠️ 注意：
duration-值必须配合transition-类才生效；单独写duration-300无效
典型场景：按钮需要「悬停放大 + 背景变深 + 文字微亮」，应统一在常态加 transition-colors transition-transform duration-200，再分别写 hover:bg-blue-700 hover:text-white hover:scale-105。
移动端 hover 效果失效？这不是 bug，是预期行为
多数触摸设备（iOS Safari、Android Chrome）**不触发 :hover 伪类**，或仅在首次点击后临时激活。这意味着纯 hover: 类写的悬停效果，在手机上基本不可见。
- 真实需求不是“禁用 hover”，而是“补充触摸反馈”：可用
active:模拟按下态，例如active:scale-95 - 若需一致动效，建议改用
group+group-hover:配合父容器监听点击/焦点（如包裹button的div加group和focus-within:） - 不要依赖
@media (hover: hover)手动切样式 —— Tailwind 目前不支持该媒体查询的响应式变体
一个实用组合：group transition-transform duration-200 active:scale-95 group-hover:scale-105，兼顾点击反馈与悬停动效。
多个 transition 属性混用时，duration 是共享的
当同时过渡颜色、边框、变换时，duration-300 会应用到所有已启用的 transition 属性上 —— 它不是 per-property 设置。
- 不能实现「背景变色用 150ms，缩放用 300ms」这种差异化节奏（Tailwind 原生不支持）
- 若需精细控制，得脱离 utility-first，用自定义 CSS 写
@layer utilities或直接内联style="transition: background-color 150ms, transform 300ms" - 性能提示：频繁触发
transform和opacity是 GPU 友好的；但width、height、top等会触发布局重排，尽量避免用transition-all涵盖它们
真正容易被忽略的是：transition 的“起点”永远是元素当前渲染状态。如果按钮初始有内联 style 或 JS 动态改过 transform，而 class 没覆盖它，动画就会从那个意外值开始 —— 建议用 transform-none 显式归零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
