Transition 使用

昨天講到元素的變形，而今天的 Transition 就是使用在元素改變時的過場動畫效果，比如顏色、形狀等，它可以指定需要的是哪一種動畫，但威爾豬一般都只有使用 all 而已，沒錯，它就已包含了全部效果。Tailwind 預設有 transition-none、transition-all、transition、transition-colors、transition-opacity、transition-shadow、transition-transform，其中使用 transition 就已包含了 background-color、border-color、color、fill、stroke、opacity、box-shadow、transform。不過威爾豬實測，不用特別寫 transition，只使用了過場動畫的持續秒數，Tailwind 依然可以運作，和上一篇講的 transform 一樣，接下來我們看看怎麼使用過場動畫吧。

Duration

這是用來計算過場動畫效果的持續時間。這邊會用毫秒數來當基準，相信看倌們都知道，1 秒等於 1000 毫秒，使用方式為：duration-{毫秒數}，Tailwind 預設秒數為下表：

當然我們覺得秒數不足也可以額外添加，這邊我們會使用到 theme.extend.transitionDuration 來做新增，範例如下：

// tailwind.config.js

  module.exports = {
    ...
    theme: {
      ... ,
      extend: {
        transitionDuration: {
         '400': '400ms',
         '600': '600ms',
         '800': '800ms',
         '1500': '1500ms',
         '2000': '2000ms',
        }
      },
      ...
    },
    ...
  }

如果沒有使用 Transition，會讓動畫效果變得生硬。

Timing Function

這是用來控制過場動畫的緩和曲線，進出點時的快慢設置，等同於 cubic-bezier，Tailwind 這邊幫我們預設了：ease-linear (線性)、ease-in (緩進快出)、ease-out (快進緩出)、ease-in-out (緩進緩出，中間較快)。

當預設的緩和曲線不滿足時，我們也可以自行設定，這邊我們會使用到 theme.extend.transitionTimingFunction 來做新增，範例如下：

// tailwind.config.js

  module.exports = {
    ...
    theme: {
      ... ,
      extend: {
        transitionTimingFunction: {
         'in-cubic': 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',
         'out-cubic': 'cubic-bezier(0.19, 1, 0.22, 1)',
        }
      },
      ...
    },
    ...
  }

如果同學們對這有興趣，可以到 cubic-bezier 上自行調整參數，並將數值貼過來重新命名即可。

Delay

如果不想要過場動畫馬上被執行，則可以使用這 Utility，來控制元素延遲過場動畫。這邊Tailwind 預設和 Duration 使用一模一樣的毫秒數，如下表：

當然想額外添加秒數也是和 Duration 方式一樣，這邊我們會使用到 theme.extend.transitionDelay 來做新增，威爾豬就不特地做範例了。

Animation

而 Tailwind 官方也預設了 4 種動畫效果讓我們使用，威爾豬覺得滿實用的，我們來看看有哪些：

Spin

這會讓元素不斷地旋轉，威爾豬做一個 Loading 的小 icon，可以參考以下範例：

<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" 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="#a855f7" stroke-width="4"></circle>
    <path class="opacity-100" fill="#a855f7" 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>

這邊可以看 DEMO。

Ping

讓元素像雷達或水波紋一樣縮放和消失，常用在通知或需要引導使用者點擊時。威爾豬做一個小範例樣式：

<span class="flex justify-center items-center">
    <span class="animate-ping absolute h-6 w-6 rounded-full bg-red-400 opacity-50"></span>
    <span class="relative rounded-full h-5 w-5 bg-red-500"></span>
</span>

這邊可以看 DEMO。

Bounce

讓元素上下跳動，常用在畫面可向下捲動時。威爾豬做一個小範例：

<span class="flex justify-center">
    <span class="relative rounded-full h-10 w-7 border-2 border-purple-500"></span>
    <span class="animate-bounce absolute h-3 w-1 rounded-full mt-2 bg-purple-500"></span>
</span>

這邊可以看 DEMO。

Pulse

讓元素淡入和淡出，有呼吸燈的感覺，有點像 Ant Design 的 Skeleton 顯示動畫效果。威爾豬做一個小範例：

<div class="max-w-sm w-full">
    <div class="animate-pulse flex space-x-4">
        <div class="flex-1 space-y-4">
            <div class="h-4 bg-gray-200 rounded w-2/4"></div>
            <div class="space-y-2">
                <div class="h-4 bg-gray-200 rounded"></div>
                <div class="h-4 bg-gray-200 rounded"></div>
                <div class="h-4 bg-gray-200 rounded w-3/4"></div>
            </div>
        </div>
    </div>
</div>

這邊可以看 DEMO。

以上就是這兩天動畫效果的內容，Tailwind 預設的動畫是不是很實用，咱們明天見。