Transition

什麼是 Transition？
顧名思義就是為了改變兩個外觀間轉換的屬性，加上 transition 可以補足兩個外觀間轉換的補間動畫，使變化更加平滑，不會過於生硬。

Transition Property

用於控制 CSS 屬性轉換。

• transition-none
• transition-all
• transition
• transition-colors
• transition-opacity
• transition-shadow
• transition-transform

設定 transition 屬性

藉由 transition-{properties} 指定哪些屬性更改時的轉換，舉個例子：

<button type="button" class="... transition-colors">有 transition</button>

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

透過 transition-colors 轉換按鈕的背景顏色更加平滑，若沒有 transition-colors 背景顏色的轉換是一瞬間，顯得相對生硬。

少使用 transition-all，依據轉換屬性給予對應 transition

什麼意思呢? 我們先來看看 transition-all 的 CSS 屬性。

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

從上方得知 transition-all 裡面的 transition-property 屬性是 all ，代表轉換屬性包含顏色、透明度、陰影、寬高等都會一起改變，雖然我們感受不到，但會衍伸問題。

舉例來說，這裡有一段 HTML。

<button type="button" class="... transition-all hover:opacity-75">transition-all</button>

transition-all 的確能夠平滑的轉換按鈕透明度，但我們轉換的屬性只有透明度，應針對透明度去做轉換效果。

讓我們改寫一下：

<button type="button" class="... transition-opacity hover:opacity-75">transition-opacity</button>

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

可以看到 transition-opacity 裡面的 transition-property 屬性是 opacity，只針對透明度去做轉換效果，相較使用 transition-all 來的更好。

當然不是說完全不要使用 transition-all ，如果轉換屬性過多，藉由 transition-all 一次達到轉換效果。
舉個例子：

<button type="button" class="... transition-all hover:opacity-75 hover:bg-purple-500 hover:-translate-y-1">transition-all</button>

Transition Duration

用於控制 CSS 屬性轉換的持續時間，預設為0秒/毫秒。

• duration-75
• duration-100
• duration-150
• duration-200
• duration-300
• duration-500
• duration-700
• duration-1000

更改轉換持續時間

藉由 duration-{amount} 控制元素轉換的持續時間，舉個例子：

<button type="button" class="... duration-500">持續時間0.5秒</button>

.duration-500 {
  transition-duration: 500ms;
}

Transition Timing Function

用於控制 CSS 轉換的速度曲線，預設為 ease。

• ease-linear
• ease-in
• ease-out
• ease-in-out

設定速度曲線

藉由 ease-{timing} 控制元素轉換的速度曲線，舉個例子：

<button type="button" class="... ease-in-out">緩進出</button>

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

cubic-bezier 又稱貝茲曲線，詳細可參考 https://cubic-bezier.com/

Transition Delay

用於 CSS 轉換延遲時間，預設為0秒/毫秒。

• delay-75
• delay-100
• delay-150
• delay-200
• delay-300
• delay-500
• delay-700
• delay-1000

設定延遲時間

藉由 delay-{amount} 控制元素的轉換延遲時間，舉個例子：

<button type="button" class="... delay-1000">延遲1秒</button>

.delay-1000 {
  transition-delay: 1000ms;
}

codepen 連結

本日重點

1. 元素效果加上 transition 讓轉換更加平滑、不生硬。
2. 單一屬性效果轉換，依據該屬性給予對應 transition，多個屬性效果轉換在使用 all。

參考

• Tailwind CSS 官網
• Tailwind CSS - Transition Property
• Tailwind CSS - Transition Duration
• Tailwind CSS - Transition Timing Function
• Tailwind CSS - Transition Delay