35. 过渡效果

按钮悬停时颜色慢慢变、菜单展开时宽度逐渐增加——这些”不跳变”的效果，都是过渡在起作用。没有过渡的界面，就像没有缓冲的汽车，一顿一顿的。

基础过渡属性

Tailwind 提供了几个工具类来控制哪些 CSS 属性需要过渡：

<!-- 默认过渡：颜色、背景色、阴影、透明度等 -->
<button class="bg-blue-500 hover:bg-blue-700 transition">
  默认过渡
</button>

<!-- 仅过渡颜色相关属性 -->
<button class="bg-blue-500 hover:bg-blue-700 transition-colors">
  颜色过渡
</button>

<!-- 仅过渡透明度 -->
<div class="opacity-100 hover:opacity-50 transition-opacity">
  透明度过渡
</div>

<!-- 仅过渡变换 -->
<div class="scale-100 hover:scale-110 transition-transform">
  变换过渡
</div>

<!-- 仅过渡阴影 -->
<div class="shadow-md hover:shadow-xl transition-shadow">
  阴影过渡
</div>

<!-- 所有属性都过渡（慎用） -->
<div class="w-20 hover:w-40 transition-all">
  全部过渡
</div>

<!-- 禁用过渡 -->
<div class="transition-none">
  无过渡
</div>

过渡持续时间

持续时间决定过渡动画的快慢。Tailwind 提供从 75ms 到 1000ms 的预设值：

<!-- 75ms - 超快，几乎瞬间完成 -->
<div class="transition duration-75">75ms</div>

<!-- 150ms - 快速反馈，适合按钮 -->
<div class="transition duration-150">150ms</div>

<!-- 300ms - 中等速度，适合大多数场景 -->
<div class="transition duration-300">300ms</div>

<!-- 500ms - 较慢，适合大面积变化 -->
<div class="transition duration-500">500ms</div>

<!-- 1000ms - 一秒，明显的动画效果 -->
<div class="transition duration-1000">1000ms</div>

实际使用中的选择建议：

• 75-150ms：按钮状态、图标切换等需要快速反馈的场景
• 200-300ms：悬停效果、颜色变化等常见交互
• 500-700ms：展开面板、滑入内容等较大变化
• 1000ms+：特殊效果，谨慎使用，容易让用户觉得界面迟钝

过渡时间函数

时间函数控制过渡的加速和减速方式，影响动画的”手感”：

<!-- 线性：整个过程速度一致 -->
<div class="transition duration-300 ease-linear">linear</div>

<!-- 缓入：开始慢，然后加速（适合元素离开） -->
<div class="transition duration-300 ease-in">ease-in</div>

<!-- 缓出：开始快，然后减速（适合元素进入） -->
<div class="transition duration-300 ease-out">ease-out</div>

<!-- 缓入缓出：两头慢中间快（最自然） -->
<div class="transition duration-300 ease-in-out">ease-in-out</div>

现实世界中物体不会瞬间启动或停止，它们需要时间加速和减速。所以大多数情况下，ease-out 或 ease-in-out 比线性过渡更自然。

过渡延迟

延迟控制过渡何时开始，可以用来创建序列动画：

<!-- 无延迟 -->
<div class="transition delay-0">立即开始</div>

<!-- 150ms 延迟 -->
<div class="transition delay-150">延迟 150ms</div>

<!-- 300ms 延迟 -->
<div class="transition delay-300">延迟 300ms</div>

<!-- 1000ms 延迟 -->
<div class="transition delay-1000">延迟 1s</div>

序列动画的常见用法——让多个元素依次出现：

<div class="flex gap-2">
  <div class="w-8 h-8 bg-blue-500 rounded-full transition-all duration-300 scale-0 group-hover:scale-100 delay-0"></div>
  <div class="w-8 h-8 bg-blue-500 rounded-full transition-all duration-300 scale-0 group-hover:scale-100 delay-75"></div>
  <div class="w-8 h-8 bg-blue-500 rounded-full transition-all duration-300 scale-0 group-hover:scale-100 delay-150"></div>
  <div class="w-8 h-8 bg-blue-500 rounded-full transition-all duration-300 scale-0 group-hover:scale-100 delay-225"></div>
  <div class="w-8 h-8 bg-blue-500 rounded-full transition-all duration-300 scale-0 group-hover:scale-100 delay-300"></div>
</div>

组合使用

实际项目中，这些工具类通常组合使用：

<!-- 按钮悬停：颜色快速过渡 -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg
               transition-colors duration-150 ease-out
               hover:bg-blue-600">
  提交
</button>

<!-- 卡片悬停：阴影和位移缓慢过渡 -->
<div class="p-6 rounded-xl shadow-md
            transition-all duration-300 ease-in-out
            hover:shadow-xl hover:-translate-y-1">
  <h3>卡片标题</h3>
  <p>卡片内容</p>
</div>

<!-- 菜单展开：高度和透明度过渡 -->
<div class="overflow-hidden opacity-0 max-h-0
            transition-all duration-500 ease-out
            group-hover:opacity-100 group-hover:max-h-96">
  展开的内容
</div>

性能考量

不是所有属性都适合过渡。浏览器处理不同属性的成本差异很大：

• 高性能：transform 和 opacity——GPU 加速，最流畅
• 中等性能：color、background-color、box-shadow
• 低性能：width、height、top、left——触发布局重绘

能用 transform 实现的动画，就不要用位置属性。比如让一个元素从左侧滑入，用 translate-x 比用 left 性能好得多。

<!-- 推荐：使用 transform -->
<div class="transition-transform duration-300 -translate-x-full group-hover:translate-x-0">
  滑入内容
</div>

<!-- 不推荐：使用 left -->
<div class="relative left-0 transition-all duration-300 hover:left-4">
  滑入内容
</div>