轉場

轉場元件更進一步採用 Vue 內建的轉場元素，讓你可以從單一根元件協調嵌套的子元件轉場。

要開始使用，請透過 npm 安裝 Headless UI。

請注意，此函式庫僅支援 Vue 3。

npm install @headlessui/vue

Vue 內建一個 <transition> 元件，它與 Tailwind 基於類型的造型方法和 Headless UI 其他元件完美搭配。事實上，你在此網站上所找到的大部分範例及程式碼摘要都只使用了此內建元件。

不過，有一個例外：嵌套的子元件轉場。當你想要為不同的子元素協調不同的動畫時，需要用到此技術——例如，同時淡入 Dialog 幕景，並從螢幕的一側滑入 Dialog 內容。

使用內建 <transition> 元素達成此效果的唯一方法是手動同步每個子元件的轉場，而且即使如此，此方法仍可能出錯且容易產生錯誤。

因此，我們在 Headless UI 中加入一個 <TransitionRoot /> 元件。它的 API 類似於 Vue 的元件，但透過下面所述的 <TransitionChild /> 元件，它也提供了一個協調多個轉場的方法。

除了 Dialog 元件以外，每當你應用單一轉場時，可以使用 Vue 內建的 <transition> 元件。對於動畫化 Dialog，或協調任何其他元件上的多個轉場時，請使用 Headless UI 中的 TransitionRoot 元件。

TransitionRoot 接受一個 show 道具，用於控制是否顯示或隱藏子元件，也有一組生命週期道具（如 enter-from 和 leave-to），讓你可以在轉場的特定階段新增 CSS 類別。

<template>
  <button @click="isShowing = !isShowing">Toggle</button>
  <TransitionRoot
    :show="isShowing"
    enter="transition-opacity duration-75"
    enter-from="opacity-0"
    enter-to="opacity-100"
    leave="transition-opacity duration-150"
    leave-from="opacity-100"
    leave-to="opacity-0"
  >
    I will fade in and out
  </TransitionRoot>
</template>

<script setup>
  import { ref } from 'vue'
  import { TransitionRoot } from '@headlessui/vue'

  const isShowing = ref(true)
</script>

將應條件式呈現的內容包覆在 < code > < TransitionRoot > 元件中，並使用 < code > show 屬性來控制內容應為可見或隱藏。

<template>
  <button @click="isShowing = !isShowing">Toggle</button>
  <TransitionRoot :show="isShowing">    I will appear and disappear.
  </TransitionRoot>
</template>

<script setup>
  import { ref } from 'vue'
  import { TransitionRoot } from '@headlessui/vue'

  const isShowing = ref(true)
</script>

預設情況下，過渡元件會呈現 < code > div 元素。

使用 < code > as 屬性可以將元件呈現為不同元素或自訂元件。任何其他 HTML 屬性（如 < code > class ）都可以直接新增到 < code > TransitionRoot ，就像套用於一般元素一樣。

<template>
  <button @click="isShowing = !isShowing">Toggle</button>
  <TransitionRoot :show="isShowing" as="a" href="/my-url" class="font-bold">    I will appear and disappear.
  </TransitionRoot>
</template>

<script setup>
  import { ref } from 'vue'
  import { TransitionRoot } from '@headlessui/vue'

  const isShowing = ref(true)
</script>

預設情況下， < code > TransitionRoot 會立即進入和離開，如果你使用此元件，這可能不是你想要的。

要為進入/離開過渡設定動畫，請使用這些屬性新增提供過渡各個階段樣式的類別

enter：元素進入時持續套用。通常會在此處定義持續時間和想要過渡的屬性，例如 < code > transition-opacity duration-75 。
enter-from：進入的起始點，例如如果某個項目應淡入，則為 < code > opacity-0 。
enter-to：進入的終點，例如在淡入後為 < code > opacity-100 。
leave：元素離開時持續套用。通常會在此處定義持續時間和想要過渡的屬性，例如 < code > transition-opacity duration-75 。
leave-from：離開的起始點，例如如果某個項目應淡出，則為 < code > opacity-100 。
leave-to：離開的終點，例如在淡出後為 < code > opacity-0 。

以下是範例

<template>
  <button @click="isShowing = !isShowing">Toggle</button>
  <TransitionRoot
    :show="isShowing"
    enter="transition-opacity duration-75"
    enter-from="opacity-0"
    enter-to="opacity-100"
    leave="transition-opacity duration-150"
    leave-from="opacity-100"
    leave-to="opacity-0"
  >
    I will appear and disappear.
  </TransitionRoot>
</template>

<script setup>
  import { ref } from 'vue'
  import { TransitionRoot } from '@headlessui/vue'

  const isShowing = ref(true)
</script>

在此範例中，過渡元素會花費 75 毫秒進入（這是 < code > duration-75 類別），且會在此時間內過渡不透明度屬性（這是 < code > transition-opacity ）。

在進入前會完全透明（這是 < code > enter-from 階段中的 < code > opacity-0 ），並在完成時淡入為完全不透明（ < code > opacity-100 ），這是 < code > enterTo 階段。

當移除元素（ < code > leave 階段）時，它會過渡不透明度屬性，並花費 150 毫秒執行此動作（ < code > transition-opacity duration-150 ）。

它會從完全不透明開始 (在 leave-from 階段的 opacity-100)，並以完全透明結束 (leave-to 階段的 opacity-0)。

所有這些 prop 是選填的，預設值為空字串。

有時您需要使用不同的動畫來轉場多個元素，但所有元素都基於相同的狀態。例如，假設使用者按一下按鈕來開啟滑動到畫面上的側邊欄，同時您還需要淡入背景疊加。

您可以透過將相關元素包裝在父層 TransitionRoot 元件中，並將每個需要自己轉場樣式的子元素包裝在 TransitionChild 元件中來達成此目的，後者會自動與父層 TransitionRoot 進行通訊，並繼承父層的 show 狀態。

<template>
  <!-- The `show` prop controls all nested `TransitionChild` components. -->
  <TransitionRoot :show="isShowing">
    <!-- Background overlay -->
    <TransitionChild
      enter="transition-opacity ease-linear duration-300"
      enter-from="opacity-0"
      enter-to="opacity-100"
      leave="transition-opacity ease-linear duration-300"
      leave-from="opacity-100"
      leave-to="opacity-0"
    >
      <!-- ... -->
    </TransitionChild>

    <!-- Sliding sidebar -->
    <TransitionChild
      enter="transition ease-in-out duration-300 transform"
      enter-from="-translate-x-full"
      enter-to="translate-x-0"
      leave="transition ease-in-out duration-300 transform"
      leave-from="translate-x-0"
      leave-to="-translate-x-full"
    >
      <!-- ... -->
    </TransitionChild>
  </TransitionRoot>
</template>

<script setup>
  import { ref } from 'vue'
  import { TransitionRoot, TransitionChild } from '@headlessui/vue'

  const isShowing = ref(true)
</script>

TransitionChild 元件具有與 TransitionRoot 元件完全相同的 API，但沒有 show prop，因為 show 值由父層控制。

父層 TransitionRoot 元件會在卸載前自動持續等待所有子元素完成轉場，所以您不需要自己管理任何一個計時。

如果您希望元素在第一次渲染時就進行轉場，請將 appear prop 設為 true。

如果您希望在初始載入頁面或條件性渲染其父層時，某樣東西轉場進來，這會很有用。

<template>
  <TransitionRoot
    appear
    :show="isShowing"
    enter="transition-opacity duration-75"
    enter-from="opacity-0"
    enter-to="opacity-100"
    leave="transition-opacity duration-150"
    leave-from="opacity-100"
    leave-to="opacity-0"
  >
    <!-- Your content goes here -->
  </TransitionRoot>
</template>

<script setup>
  import { ref } from 'vue'
  import { TransitionRoot } from '@headlessui/vue'

  const isShowing = ref(true)
</script>

Prop	預設值	描述
`show`	—	`布林值` 子元素是否應顯示或隱藏。
`as`	`div`	`字串 \| 元件` 在轉場本身所在位置要渲染的元素或元件。
`appear`	`false`	`布林值` 轉場是否應在初始掛載時執行。
`unmount`	`true`	`布林值` 元素是否應根據 show 狀態卸載或隱藏。
`enter`	—	`字串` 在整個 enter 階段要新增到轉場元素的類別。
`enter-from`	—	`字串` 元素在進入階段開始前應加上去的類別。
`enter-to`	—	`字串` 元素在進入階段開始後立即加上去的類別。
`entered`	—	`字串` 過渡完成後應加上去的類別。這些類別會持續一段時間，直到元素離開。
`leave`	—	`字串` 元素在整個離開階段應加上去的類別。
`leave-from`	—	`字串` 元素在離開階段開始前應加上去的類別。
`leave-to`	—	`字串` 元素在離開階段開始後立即加上去的類別。

事件	描述
`before-enter`	進入過渡開始前發出。
`after-enter`	進入過渡完成後發出。
`before-leave`	離開過渡開始前發出。
`after-leave`	離開過渡完成後發出。

Prop	預設值	描述
`as`	`div`	`字串 \| 元件` 在轉場本身所在位置要渲染的元素或元件。
`appear`	`false`	`布林值` 轉場是否應在初始掛載時執行。
`unmount`	`true`	`布林值` 元素是否應根據 show 狀態卸載或隱藏。
`enter`	—	`字串` 在整個 enter 階段要新增到轉場元素的類別。
`enter-from`	—	`字串` 元素在進入階段開始前應加上去的類別。
`enter-to`	—	`字串` 元素在進入階段開始後立即加上去的類別。
`entered`	—	`字串` 過渡完成後應加上去的類別。這些類別會持續一段時間，直到元素離開。
`leave`	—	`字串` 元素在整個離開階段應加上去的類別。
`leave-from`	—	`字串` 元素在離開階段開始前應加上去的類別。
`leave-to`	—	`字串` 元素在離開階段開始後立即加上去的類別。

事件	描述
`before-enter`	進入過渡開始前發出。
`after-enter`	進入過渡完成後發出。
`before-leave`	離開過渡開始前發出。
`after-leave`	離開過渡完成後發出。