Tailwind的transition-*类需配合状态变化（如hover）或手动切换class才生效，单独使用无效；必须与duration-、ease-等组合使用，且确保属性可过渡（如color需用transition-colors而非transition-all）。
tailwind.css 里 transition-* 类怎么配才生效
过渡工具类本身不触发动画，必须配合状态变化（比如 hover、focus）或手动切换 class 才能看到效果。只写 transition-all 不会自动动，它只是告诉浏览器“之后属性变的时候，请用这个缓动和时长”。
常见错误现象：transition-opacity 加了但 opacity 改变时没动画；transition-color 对文字颜色无效（CSS 规范不支持 color 过渡的简写，得用 transition-property: color 或改用 transition 全写）。
-
transition是 shorthand，但 Tailwind 默认只提供transition-none/transition-all/transition-colors/transition-opacity/transition-shadow等有限组合，不是所有 CSS 属性都有对应工具类 - 想过渡
transform或background-color，得用transition+duration-+ease-组合，比如：transition-transform duration-300 ease-in-out - Tailwind v3.4+ 开始支持
transition-[property]（需启用 experimental 功能），但生产环境建议优先用已稳定工具类
为什么加了 transition-duration-300 还是没延迟感
时长类名（如 duration-300）必须和 transition- 类一起出现才有效。单独写 duration-300 没作用，它不设置任何 CSS 属性，只提供 transition-duration 值，但前提是父级已有 transition-property 定义。
使用场景：按钮悬停变色、下拉菜单展开、卡片 hover 抬升。这些都需要「初始态 → 触发态」两个明确状态，且至少一个可过渡属性发生变化。
立即学习“前端免费学习笔记（深入）”；
在现实生活中的购物过程，购物者需要先到商场，找到指定的产品柜台下，查看产品实体以及标价信息，如果产品合适，就将该产品放到购物车中，到收款处付款结算。电子商务网站通过虚拟网页的形式在计算机上摸拟了整个过程，首先电子商务设计人员将产品信息分类显示在网页上，用户查看网页上的产品信息，当用户看到了中意的产品后，可以将该产品添加到购物车，最后使用网上支付工具进行结算，而货物将由公司通过快递等方式发送给购物者
- 检查是否漏了
transition基础类（如transition-colors），否则duration-和ease-都是空转 -
duration-75到duration-1000范围内，人眼对 100–300ms 最敏感，超过 400ms 就容易觉得“卡”，别盲目加长 - 移动端要注意：iOS Safari 对
transform+transition组合更友好，纯top/left位移可能掉帧
transition-bezier-curve 在哪配、怎么选
Tailwind 的 ease- 工具类（如 ease-in-out）本质是贝塞尔曲线预设，对应 CSS 的 transition-timing-function。它们不是魔法，只是把 cubic-bezier(0.4, 0, 0.2, 1) 这种难记的值封装成语义名。
性能影响：自定义贝塞尔（如 ease-[0.17,0.67,0.83,0.67]）在旧版 Tailwind 需要 JIT 编译支持，v3.3+ 默认启用，但若未开启 experimental.optimizeUniversalDefaults，可能生成冗余 CSS。
- 常用组合：
ease-in（慢启）、ease-out（慢停）、ease-in-out（两头慢）、ease-linear（匀速） - 想模拟物理惯性？用
ease-[cubic-bezier(0.34,1.56,0.64,1)]（注意括号和逗号必须用英文，且整体包裹在方括号里） - 别在 hover 动画里用
ease-in单独配，用户手指离开瞬间会“突兀收尾”，搭配ease-out反向更自然
Vue/React 里用 transition-* 类为什么一闪而过
框架组件切换时，如果 DOM 节点被直接销毁（比如 v-if 或 key 变化），浏览器来不及触发动画。过渡类需要“同一节点存活期间属性变化”，而不是“旧节点删、新节点建”。
使用场景：模态框显隐、列表项增删、路由页面切换。这些必须借助框架提供的过渡封装（如 Vue 的 <transition></transition>、React 的 framer-motion 或原生 requestAnimationFrame 控制 class 切换时机）。
- Vue 中：
<transition enter-active-class="transition-opacity duration-300" ...></transition>，不能只靠 class 写死 - React 中：别在
useEffect里直接el.classList.add('opacity-0')，要用setTimeout或queueMicrotask让浏览器先渲染初始态 - 通用技巧：给目标元素加
will-change: opacity（仅对频繁动画元素），避免重排阻塞
真正卡住人的地方往往不是类名拼错，而是没意识到 transition 是“描述变化过程”，不是“启动动画指令”。DOM 必须存在、属性必须可变、状态切换必须可控——缺一不可。
