iT邦幫忙

2021 iThome 鐵人賽

DAY 11
4
Modern Web

排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發!系列 第 12

Day 11:「動起來!動起來!」- 用 Tailwind 簡單做出過渡和動畫效果

Day11-Banner

還記得我們在之前做過變化模式嗎?
沒錯,就是滑鼠懸停之後會變色的那個。

我們今天呢,就是要來幫它們加上過渡效果和動畫!

今天我們就不多講廢話了,直接開始吧!
 

carrotPoint 舊圖重發

<div class="flex justify-evenly p-10 focus-within:bg-green-100 group">
  <box class="bg-red-500 hover:bg-red-400 ring-red-300 focus:ring-4 group-hover:text-gray-600" tabindex="0">
    1
  </box>

  <box class="bg-blue-500 hover:bg-blue-400 ring-blue-300 focus:ring-4 group-hover:text-gray-600" tabindex="1">
    2
  </box>
</div>

欸 ...! 今天這個段落的標題是誰上的!
說什麼舊圖重發 ... 它是看起來長一樣沒錯,
但其實是重新截圖的啊!

啊算了,今天的範本其實跟上次是同一個, 就放在這邊,
快點打開一起跟著做作業吧!

今天的功能也簡單哦~ Let's ... GO!
 

carrotPoint 過渡效果 (transition-property)

透過使用 transition-{支援類型} 這個功能,我們可以設定 / 改變 元素支援過渡效果的樣式類型,例如 transition-colors 功能是元素顏色變換時才具有過渡效果,但其他樣式改變時並不會有過渡效果

以下是預設可以使用的過渡效果功能:

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

使用對應的過渡效果可以讓畫面瀏覽起來不那麼耗效能,因為你並不是對每個屬性都開啟過渡效果。

 

我們這邊來偷懶一下, 為了讓它可以之後不管增加什麼屬性的改變都能夠擁有過渡效果,我們為最外層及兩個方塊都加上 transition-all

<div class="flex justify-evenly p-10 focus-within:bg-green-100 group transition-all">
  <box class="bg-red-500 hover:bg-red-400 ring-red-300 focus:ring-4 group-hover:text-gray-600 transition-all" tabindex="0">
    1
  </box>

  <box class="bg-blue-500 hover:bg-blue-400 ring-blue-300 focus:ring-4 group-hover:text-gray-600 transition-all" tabindex="1">
    2
  </box>
</div>

(啊,就算放圖你們也看不出效果差異,所以就不放了)

加完之後會發現馬上就有過渡效果,整個質感大大大提升!

蛤! 什麼!? 你說這樣就很不錯了,後面不用介紹了?
別這樣嘛~ 還是要介紹一下啦~

因為有接下來這個功能會讓你更方便、更有質感!
 

carrotPoint 過渡效果持續時間 (transition-duration)

透過使用 duration-{支援類型} 這個功能,我們可以設定 / 改變 元素過渡效果的持續時間,例如 duration-1000 功能是將元素過渡效果的持續時間設定為 1000 ms,也就是 1 秒

以下是預設可以使用的過渡效果持續時間功能:

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

為了感受過渡時間的效果差異,我們在最外層上使用 duration-1000 來使它的過渡效果持續時間比其他人慢很多。(預設是 150 ms)

<div class="flex justify-evenly p-10 focus-within:bg-green-100 group transition-all duration-1000">
  <box class="bg-red-500 hover:bg-red-400 ring-red-300 focus:ring-4 group-hover:text-gray-600 transition-all" tabindex="0">
    1
  </box>

  <box class="bg-blue-500 hover:bg-blue-400 ring-blue-300 focus:ring-4 group-hover:text-gray-600 transition-all" tabindex="1">
    2
  </box>
</div>

欸,應該 ... 看得出來吧?

好沒關係,接下來再看不出來就 ... 就看不出來啦!
 

carrotPoint 過渡效果延遲 (transition-delay)

透過使用 delay-{支援類型} 這個功能,我們可以設定 / 改變 元素過渡效果發生的延遲時間,例如 delay-1000 功能是將元素過渡效果的發生時間延遲 1000 ms,也就是 1 秒

以下是預設可以使用的過渡效果延遲功能:

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

delay-1000 加在最外層,讓最外層的過渡效果更慢更明顯吧:

<div class="flex justify-evenly p-10 focus-within:bg-green-100 group transition-all duration-1000 delay-1000">
  <box class="bg-red-500 hover:bg-red-400 ring-red-300 focus:ring-4 group-hover:text-gray-600 transition-all" tabindex="0">
    1
  </box>

  <box class="bg-blue-500 hover:bg-blue-400 ring-blue-300 focus:ring-4 group-hover:text-gray-600 transition-all" tabindex="1">
    2
  </box>
</div>

這下總看得出來了! 摁,你肯定看得出來。

再來,我們就不是要繼續玩過渡效果囉,而是動畫!
 

carrotPoint 動畫 (animation)

透過使用 animation-{動畫類型} 這個功能,我們可以設定 / 改變 元素的動畫效果,例如 animation-spin 功能是將元素加上旋轉的動畫

以下是預設可以使用的動畫功能:

  • animate-none
  • animate-spin
  • animate-ping
  • animate-pulse
  • animate-bounce

這些動畫功能都是已經預設的動畫組合,而且都是屬於較常用的動畫。

接著來試著把紅色方塊用 animation-bounce 加上彈跳動畫,然後用 animation-pulse 讓藍色方塊具有脈衝效果 (類似閃爍):

<div class="flex justify-evenly p-10 focus-within:bg-green-100 group transition-all duration-1000 delay-1000">
  <box class="bg-red-500 hover:bg-red-400 ring-red-300 focus:ring-4 group-hover:text-gray-600 transition-all animate-bounce" tabindex="0">
    1
  </box>

  <box class="bg-blue-500 hover:bg-blue-400 ring-blue-300 focus:ring-4 group-hover:text-gray-600 transition-all animate-pulse" tabindex="1">
    2
  </box>
</div>

元素們是不是又更活潑生動了呢!
這樣一來就可以做出很多很棒的應用啦~
 

今天就大概到這邊囉!
請好好休息為下一篇做準備,

因為下一篇 ... 要開始來安裝和設定了!
那可就沒有像前面這麼輕鬆愉快囉~
 

carrotPoint 給你們的回家作業:


關於兔兔們:


 


( # 兔兔小聲說 )

兔子小知識

[ 動如脫兔 ]
軍隊行動迅速,像逃脫的兔子一般。語本《孫子集注.卷十一.九地》。後比喻動作十分敏捷。

去百科查了才知道是這個解釋,
但我怎麼看都是罵軍隊撤退逃竄的很快 XD


上一篇
Day 10:「伸縮自如的,橡膠...」- 斷點 / RWD
下一篇
Day 12:「我可不可以 CDN 就好?」- Tailwind 安裝及設定
系列文
排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發!32

尚未有邦友留言

立即登入留言