Tailwind CSS - 过渡属性

# Tailwind CSS：掌握过渡属性

Tailwind CSS 中的 transition-property 工具类指定了当 CSS 属性发生变化时，哪些属性应该被动画化。将它们与持续时间、延迟和缓动（easing）工具类结合使用，可以让你以最小的努力创建流畅且引人入胜的用户体验。

## 核心过渡属性工具类

Tailwind 提供了一系列直观的类来控制元素的 transition-property。以下是最常见的一些：

类名	CSS 属性与用例
`transition`	`transition-property: color, background-color, border-color, ...;` 这是一个明智的默认值，它过渡了一组最常被动画化的精选属性。这是你通常会选择的类。
`transition-all`	`transition-property: all;` 过渡所有可能的动画属性。请谨慎使用，因为它可能动画化你不想动的属性，从而导致性能问题。
`transition-colors`	`transition-property: color, background-color, border-color, ...;` 专门针对颜色相关属性。非常适合主题切换或按钮的悬停效果。
`transition-opacity`	`transition-property: opacity;` 仅过渡元素的 `opacity` 属性，非常适合淡入/淡出效果。
`transition-shadow`	`transition-property: box-shadow;` 过渡元素 `box-shadow` 的变化，创建平滑的深度效果。
`transition-transform`	`transition-property: transform;` 用于动画化 `scale`、`rotate` 和 `translate` 等变换。
`transition-none`	`transition-property: none;` 禁用元素上的所有过渡。对于在特定元素或状态上覆盖更通用的过渡样式非常有用。

## 构建一个完整的过渡

transition-property 工具类只是拼图的一部分。要创建一个完整的动画，你需要将它们与持续时间、缓动和延迟工具类结合使用。

duration-{amount}：控制过渡持续多长时间（例如，duration-300 表示 300 毫秒）。
ease-{timing}：控制动画的速度曲线（例如，ease-in-out 表示缓慢开始和结束）。
delay-{amount}：在过渡开始前添加一个暂停（例如，delay-100）。

当你使用任何 transition-* 工具类时，Tailwind 会自动应用 150ms 的默认持续时间和 ease-in-out 曲线，但你可以轻松地覆盖这些默认值。

## 实际应用：交互式卡片

让我们构建一个交互式卡片组件，它在悬停时使用各种过渡效果。这个示例演示了如何结合属性、持续时间和 transform 工具类来获得一个精致的效果。

### 示例：交互式卡片组件

专业提示：为了进行实时编辑和实验，你可以将此代码粘贴到 Tailwind Play 中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modern Transition Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 text-white min-h-screen flex items-center justify-center font-sans">

  <div class="group relative w-72 rounded-xl bg-slate-800 p-6 shadow-lg">
    <!--
      基础过渡类在此处应用。
      我们定义了哪些属性可以被动画化，它们的持续时间以及缓动函数。
      `group` 类允许我们对子元素触发悬停效果。
    -->
    <div class="absolute inset-0 rounded-xl bg-blue-500 opacity-0 transition-opacity duration-500 group-hover:opacity-10"></div>

    <div class="relative">
      <h3 class="text-xl font-bold">Project Titan</h3>
      <p class="mt-2 text-slate-400 transition-colors duration-300 group-hover:text-slate-300">
        A next-generation platform for cloud development.
      </p>

      <!-- 这个按钮结合了多种过渡效果 -->
      <button class="mt-6 w-full rounded-lg bg-slate-700 px-4 py-2 text-sm font-semibold
                   transition-all duration-300 ease-in-out
                   group-hover:bg-blue-600 group-hover:text-white group-hover:shadow-md group-hover:shadow-blue-600/50
                   transform group-hover:-translate-y-1 group-hover:scale-105">
        View Details
      </button>
    </div>

  </div>

</body>
</html>

## 可访问性和性能

### 尊重用户偏好

有些用户由于前庭疾病（vestibular disorders）偏好减少动态效果。你可以通过使用 motion-reduce 变体来尊重这一偏好，如果用户在其操作系统中启用了此设置，它将禁用动画。

<!-- 如果用户偏好减少动态效果，这个元素将不会有过渡效果 -->
<button class="transition hover:scale-110 motion-reduce:transition-none motion-reduce:transform-none ...">
  Hover Me
</button>

### 自定义过渡属性

如果你需要过渡一个不在默认 transition 工具类中的属性，你可以将其添加到你的 tailwind.config.js 文件中。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      transitionProperty: {
        'height': 'height',
        'spacing': 'margin, padding',
      }
    }
  }
}