#本文教學結合TailwindCSS實現一個Transition動畫的例子#

舉例代碼：

  <transition enter-active-class="transition-all duration-300 ease-out"enter-from-class="opacity-0 translate-y-[-10px]"enter-to-class="opacity-100 translate-y-0"leave-active-class="transition-all duration-300 ease-out"leave-from-class="opacity-100 translate-y-0"leave-to-class="opacity-0 translate-y-[-5px]"><!-- 你的內容 --></transition>

開始分析：

進入階段

1，enter-active-class：應用在整個進入階段

enter-active-class="transition-all duration-300 ease-out"

• transition：啟用過渡效果（對應 CSS transition-property）

• duration-300：過渡時長 300ms（對應 transition-duration）

• ease-out：緩動函數（對應 transition-timing-function）

2，enter-from-class：進入起始狀態

enter-from-class="opacity-0 translate-y-[-10px]"

• opacity-0：完全透明

• translate-y-[-10px]：Y軸向上偏移10px（使用自定義值語法）

3，enter-to-class：進入結束狀態

enter-to-class="opacity-100 translate-y-0"

• opacity-100：完全不透明

• translate-y-0：Y軸歸位

離開階段

• leave-active-class：應用在整個離開階段

• leave-active-class="transition-all duration-300 ease-out"
  

• leave-from-class：離開起始狀態

• leave-from-class="opacity-100 translate-y-0"
  

• leave-to-class：離開結束狀態

• leave-to-class="opacity-0 translate-y-[-5px]"