Tailwind CSS - 过渡与动画

现代 Tailwind CSS：过渡与动画

在现代 Web 开发中，过渡和动画对于创建引人入胜、直观的用户界面至关重要。它们提供视觉反馈并引导用户的注意力。Tailwind CSS 提供了一套全面的功能类，可以直接在 HTML 中轻松应用、控制和自定义这些效果。

核心过渡与动画功能类

以下是 Tailwind CSS 中用于创建过渡和动画的基本功能类。这些类可以组合使用以实现各种效果。

功能类	描述	现代实践
过渡属性（`transition`）	指定在过渡期间哪些 CSS 属性应被动画化。使用 `transition-all` 或针对特定属性，如 `transition-colors` 或 `transition-transform`。	针对特定属性比使用 `transition-all` 更能提升性能。
过渡持续时间（`duration-*`）	控制过渡效果完成所需的时间。例如，`duration-300` 设置 300 毫秒的持续时间。	在 UI 中使用一致的持续时间以获得统一的感觉。
过渡缓动函数（`ease-*`）	控制过渡的加速度曲线，使其感觉更自然。常见选项包括 `ease-in-out` 和 `ease-linear`。	`ease-in-out` 通常比 `ease-linear` 提供更自然、更令人愉悦的效果。
过渡延迟（`delay-*`）	在过渡开始前添加一个暂停。在序列中错开动画时很有用。	谨慎使用延迟，以避免使 UI 感觉迟钝。
动画（`animate-*`）	将预定义的关键帧动画应用于元素。包括 `animate-spin`、`animate-ping` 和 `animate-bounce` 等功能类。	可以在 `tailwind.config.js` 中轻松扩展你自己的自定义关键帧动画。
运动安全（`motion-safe`、`motion-reduce`）	根据用户操作系统级别对减少运动的偏好有条件地应用样式，提高可访问性。	始终将动画包裹在 `motion-safe` 中以尊重用户偏好。

示例：带过渡的交互式卡片

此示例演示如何组合过渡功能类以创建流畅的交互式卡片组件。请注意我们如何使用 transition 类启用过渡，然后使用 hover: 变体定义悬停时的变化。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 为了演示，我们使用 Tailwind Play CDN。在实际项目中，你会使用构建步骤。 -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 dark:bg-slate-900 flex items-center justify-center min-h-screen p-8">

  <div class="group bg-white dark:bg-slate-800 rounded-xl p-6 shadow-lg space-y-4">
    <h3 class="text-2xl font-bold text-slate-900 dark:text-white">
      交互式卡片
    </h3>
    <p class="text-slate-600 dark:text-slate-400">
      将鼠标悬停在下面的按钮上，查看过渡效果的组合。
    </p>
    <button class="
      /* Base styles */
      px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md
      transform

      /* Transition properties */
      transition-all duration-300 ease-in-out

      /* Hover states */
      hover:bg-indigo-700 hover:scale-105 hover:shadow-xl

      /* Focus states for accessibility */
      focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75

      /* Accessibility for motion */
      motion-safe:hover:scale-105 motion-reduce:hover:scale-100"
    >
      悬停我
    </button>
  </div>

</body>
</html>

示例：自定义动画

虽然 Tailwind 内置的动画很有用，但实际项目通常需要自定义效果。你可以轻松地在 tailwind.config.js 文件中定义自己的关键帧和动画。在这里，我们将演示一个加载旋转器（animate-spin）和一个自定义的“渐入向上”（fade-in-up）动画。

1. 配置 `tailwind.config.js`

首先，定义自定义的关键帧和动画功能类。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      keyframes: {
        'fade-in-up': {
          '0%': {
            opacity: '0',
            transform: 'translateY(20px)'
          },
          '100%': {
            opacity: '1',
            transform: 'translateY(0)'
          }
        }
      },
      animation: {
        'fade-in-up': 'fade-in-up 0.5s ease-out'
      }
    }
  },
  plugins: []
}

2. 在 HTML 中应用动画

现在，你可以像使用其他功能类一样使用 animate-fade-in-up。此示例还包含一个标准的 animate-spin 进行比较。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    // This script block simulates the custom config for the CDN
    // 此脚本块模拟 CDN 的自定义配置
    tailwind.config = {
      theme: {
        extend: {
          keyframes: {
            'fade-in-up': {
              '0%': { opacity: '0', transform: 'translateY(20px)' },
              '100%': { opacity: '1', transform: 'translateY(0)' }
            }
          },
          animation: {
            'fade-in-up': 'fade-in-up 0.5s ease-out forwards' // 'forwards' keeps the final state // 'forwards' 保持最终状态
          }
        }
      }
    }
  </script>
</head>
<body class="bg-gray-100 flex flex-col items-center justify-center min-h-screen p-8 space-y-12">

  <!-- Standard Animation Example -->
  <!-- 标准动画示例 -->
  <div class="flex items-center space-x-4">
    <svg class="animate-spin h-8 w-8 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
    </svg>
    <span class="text-lg font-medium text-gray-700">加载中...</span>
  </div>

  <!-- Custom Animation Example -->
  <!-- 自定义动画示例 -->
  <div class="text-center animate-fade-in-up">
    <h2 class="text-3xl font-bold text-gray-800">你好，自定义动画！</h2>
    <p class="mt-2 text-gray-600">此元素渐入并向上移动。</p>
  </div>

</body>
</html>