Tailwind CSS -即将改变

Tailwind CSS **即将改变** 是一个预定义类集合，它告知浏览器哪些元素属性将发生变化，有助于提高动画和过渡的性能。

Tailwind CSS 将改变类

下面列出了 Tailwind CSS 将改变的类，这些类通过向浏览器显示将更改哪些属性来帮助提高性能。

类	CSS 属性
will-change-auto	will-change: auto;
will-change-scroll	will-change: scroll-position;
will-change-contents	will-change: contents;
will-change-transform	will-change: transform;

Tailwind CSS 将改变类的功能

**will-change-auto:** 此类允许浏览器决定如何管理更改。
**will-change-scroll:** 此类有助于提高将要滚动的元素的性能。
**will-change-contents:** 此类提高了内容不断变化的元素的性能。
**will-change-transform:** 此类提高了变换不断变化的元素的性能。

Tailwind CSS 将改变类示例

以下是 Tailwind CSS 将改变类的示例，这些示例显示了如何帮助浏览器管理不同的属性更改以获得更好的性能。

Tailwind CSS 将改变自动和滚动类

此示例显示如何使用 Tailwind CSS 的 will-change 类。**will-change-auto** 类表示元素的任何 CSS 属性都可能发生更改，而 **will-change-scroll** 专门针对与滚动相关的更改优化性能。

示例

  
<!DOCTYPE html>
<html lang="en">
<head>  
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-6">
        Tailwind CSS Will Change
    </h1>
    <h3 class="underline font-bold mb-2">
        will-change-auto
    </h3>
    <div class="will-change-auto bg-pink-200 p-2">
        <p>This box hints that any property 
            may change.
        </p>
    </div>
     <h3 class="underline font-bold mb-2 mt-6">
        will-change-scroll
    </h3>
    <div class="will-change-scroll p-4 bg-blue-200 
                max-h-24 overflow-y-auto">
            Scrollable content<br>inside this box....
        <br>Each step forward,<br>no matter
        <br>how small,<br>brings us closer
        <br>to<br>our full 
        potential.
    </div>
</body>

</html>

Tailwind CSS 将改变内容示例

此示例显示了 Tailwind CSS 的将改变类。**will-change-content** 类表示框中的内容可能会更改。单击按钮时，框的文本内容会更新为新消息。

示例

<!DOCTYPE html>
<html lang="en">
<head>  
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
   <h1 class="text-2xl font-bold">
       Tailwind CSS Will Change Classes
   </h1>
   <div class="p-6 max-w-lg">
        <div class="will-change-content bg-purple-200 p-4 
                    border border-purple-500 rounded">
            <p id="content-box">
                This box hints that content might change.
            </p>
        </div>
        <!-- Button to Change Content -->
        <button onclick="document.getElementById
            ('content-box').textContent = 
                        'Content has been updated!';" 
            class="bg-blue-600 text-white p-2 mt-4">
                Change Content
        </button>
    </div>
</body>

</html>

带有悬停效果的 Tailwind CSS 将改变类

此示例显示了 Tailwind CSS 的将改变类：'**will-change-auto**' 表示任何属性都可能发生更改；'**will-change-transform**' 平滑悬停时的缩放等变换；'**will-change-contents**' 在悬停时内容更改时调整不透明度；'**will-change-scroll**' 提高滚动区域的性能。

示例

<!DOCTYPE html>
<html lang="en">
<head>  
    <script src="https://cdn.tailwindcss.com"></script>
</head> 

<body class="p-4">
    <h1 class="text-2xl font-bold mb-6">
        Tailwind CSS Will Change Classes
    </h1>
    <div class="grid grid-cols-2 gap-4"> 
        <div>
            <h3 class="underline font-bold mb-2">
                Will Change Auto
            </h3>
            <div class="will-change-auto bg-gray-200 p-2">
                This box hints that any property might 
                change.
            </div>
        </div>
 
        <div>
            <h3 class="underline font-bold mb-2">
                Will Change Transform
            </h3>
            <div class="will-change-transform bg-green-200 p-2 
                        hover:scale-110">
                Hover to see the transform scale effect.
            </div>
        </div>
 
        <div>
            <h3 class="underline font-bold mb-2">
                Will Change Contents
            </h3>
            <div class="will-change-contents bg-yellow-200 p-4 
                        hover:opacity-50">
                Hover to see the opacity change effect.
            </div>
        </div> 
 
        <div>
            <h3 class="underline font-bold mb-2">
                Will Change Scroll
            </h3>
            <div class="will-change-scroll bg-blue-200 p-2 
                        max-h-24 overflow-y-auto">
                Scroll inside to see the scroll effect...
                <br>Learning<br>is a<br>lifelong journey
                <br>that 
                <br>opens doors to new<br>opportunities
                <br>and<br>personal growth.
            </div>
        </div> 
    </div>
</body>

</html>

打印页面