Tailwind CSS - 过渡持续时间

通过过渡持续时间实现动画效果

流畅的动画是打造精致用户界面的关键。Tailwind 的过渡持续时间工具类（duration-*）控制 CSS 过渡的速度，让你能创建流畅且引人入胜的交互元素。

理解 CSS 过渡

在 Tailwind 中，一个完整的 CSS 过渡需要三个核心组件：

transition：这个类用于启用过渡效果。你可以指定哪些属性应该被动画化（例如，transition-colors、transition-transform，或者仅使用 transition 表示所有属性）。
duration-*：这个类设置过渡从开始状态到结束状态所需的时间（例如，duration-300 表示 300 毫秒）。
ease-*：这个类定义动画的加速度曲线（即时间函数，timing function），例如 ease-in-out 用于平滑的开始和结束。

过渡持续时间类

Tailwind 为持续时间值提供了一个精心调整的比例尺，从即时（0ms）到一整秒。

类名	CSS 属性
duration-0	transition-duration: 0s;
duration-75	transition-duration: 75ms;
duration-100	transition-duration: 100ms;
duration-150	transition-duration: 150ms;
duration-200	transition-duration: 200ms;
duration-300	transition-duration: 300ms;
duration-500	transition-duration: 500ms;
duration-700	transition-duration: 700ms;
duration-1000	transition-duration: 1000ms;

专业提示：对于自定义持续时间，你可以使用任意值，例如 duration-[250ms]。

交互式按钮示例

以下示例展示了不同的持续时间值如何影响交互式按钮的体验。请注意我们如何结合使用 transition、duration、ease 以及像 hover: 这样的状态修饰符。

<!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>
  <title>Transition Duration Example</title>
</head>
<body class="bg-slate-100 flex items-center justify-center min-h-screen">
  <div class="grid grid-cols-1 sm:grid-cols-2 gap-8">

    <!-- 快速过渡 -->
    <button class="px-6 py-3 font-semibold text-white bg-sky-500 rounded-lg shadow-md
                   transition-all duration-150 ease-in-out
                   hover:bg-sky-600 hover:scale-105">
      Fast (150ms)
    </button>

    <!-- 中等过渡 -->
    <button class="px-6 py-3 font-semibold text-white bg-emerald-500 rounded-lg shadow-md
                   transition-all duration-300 ease-in-out
                   hover:bg-emerald-600 hover:scale-105">
      Medium (300ms)
    </button>

    <!-- 慢速过渡 -->
    <button class="px-6 py-3 font-semibold text-white bg-amber-500 rounded-lg shadow-md
                   transition-all duration-700 ease-in-out
                   hover:bg-amber-600 hover:scale-105">
      Slow (700ms)
    </button>

    <!-- 自定义持续时间 -->
    <button class="px-6 py-3 font-semibold text-white bg-rose-500 rounded-lg shadow-md
                   transition-all duration-[2000ms] ease-in-out
                   hover:bg-rose-600 hover:scale-105">
      Very Slow (2s)
    </button>

  </div>
</body>
</html>

性能和最佳实践

性能：动画 transform 和 opacity 具有很高的性能，因为它们不会触发浏览器的重排（reflow）或重绘（repaint）。避免在复杂元素上对影响布局的属性（如 width、height、margin 或 padding）进行过渡，这可能导致动画卡顿。

用户体验：理想的持续时间取决于具体情境。短持续时间（100-200ms）非常适合细微的反馈，如颜色变化。较长的持续时间（300-500ms）适用于空间移动，如面板滑入视图。过长的过渡可能会让界面感觉迟缓。

调试过渡效果

如果你的过渡效果不工作，请检查以下常见问题：

缺少 transition 类：你必须使用 transition-* 工具类来启用过渡。
缺少 duration-* 或 ease-* 类：虽然浏览器有默认值，但明确设置这些类可以确保一致的行为。
应用于错误的状态：确保你的 hover:、focus: 或其他状态修饰符正确应用于你想要更改的属性。