Tailwind CSS - 将要改变

# Tailwind CSS 现代指南：Will Change

will-change 工具类是一种性能优化工具。它们充当对浏览器的提示，告知浏览器元素上哪些属性将来可能发生变化。这使得浏览器能够在实际需要之前进行优化设置，从而潜在地防止卡顿并创建更流畅的动画。

注意事项：过早优化的危险

这是一个高级工具类，应谨慎使用。 will-change 属性经常被误解和滥用。错误地应用它实际上会因消耗内存用于从未使用的优化而损害性能。

经验法则： 除非您在过渡或动画过程中遇到明显的性能问题（卡顿、闪烁、跳帧）并已确定 will-change 是一个潜在解决方案，否则不要使用 will-change。

## Will Change 工具类

这些工具类告诉浏览器您预期会对其进行动画处理的属性。

类名	CSS 属性	何时使用
will-change-scroll	will-change: scroll-position;	用于预期其滚动位置会进行动画处理的元素。
will-change-contents	will-change: contents;	用于预期其内容会发生变化的元素。
will-change-transform	will-change: transform;	对于将使用 transform（例如 scale、rotate、translate）进行动画处理的元素至关重要。
will-change-auto	will-change: auto;	默认值，不应用任何特殊优化。

## 实际示例：平滑变换动画

will-change 的一个常见且有效的用例是平滑 CSS 变换动画。通过添加 will-change-transform，我们向浏览器建议应将元素提升到其自身的合成层，从而使 transform 和 opacity 更改的处理成本大大降低。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modern Will Change Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 dark:bg-slate-900 p-8 grid place-content-center min-h-screen font-sans">

  <div class="text-center">
    <h1 class="text-2xl font-bold text-slate-900 dark:text-white mb-6">Optimizing Animations</h1>

    <div class="flex space-x-8">
      <!-- 没有 will-change -->
      <div>
        <p class="mb-2 font-semibold text-slate-700 dark:text-slate-300">Standard Transform</p>
        <div class="w-32 h-32 bg-rose-500 rounded-lg flex items-center justify-center text-white font-bold transition-transform duration-500 ease-in-out hover:scale-125 hover:rotate-12">
          Hover Me
        </div>
      </div>

      <!-- 使用 will-change-transform -->
      <div>
        <p class="mb-2 font-semibold text-slate-700 dark:text-slate-300">With `will-change-transform`</p>
        <div class="w-32 h-32 bg-indigo-500 rounded-lg flex items-center justify-center text-white font-bold transition-transform duration-500 ease-in-out hover:scale-125 hover:rotate-12 will-change-transform">
          Hover Me
        </div>
        <p class="text-xs text-slate-500 mt-2 max-w-xs">May appear smoother on complex pages or slower devices.</p>
      </div>
    </div>

  </div>

</body>
</html>

## 最佳实践与最终建议

• 保持精确： 尽可能使用最具体的工具类。如果您正在为变换（transform）添加动画，请使用 will-change-transform，而不是 will-change-contents。
• 应用和移除： 在理想情况下，您会在动画开始前通过 JavaScript 添加 will-change 属性，并在动画完成后将其移除。对于简单的悬停效果，将其保留在类列表中是一个可接受的权衡。
• 测试，不要猜测： 使用您的浏览器开发者工具（如 Chrome DevTools 中的性能 (Performance) 选项卡）来衡量 will-change 的影响。如果它不能提高您的帧率，请将其移除。
• transform 和 opacity： 当对 transform 和 opacity 属性进行动画处理时，会获得最大的性能提升，因为如果元素位于其自身的合成层上，这些操作可以完全由 GPU 处理。will-change-transform 是解锁此功能的关键。