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>

列印頁面