早在二月份，我們就發布了 Tailwind UI，這是一個 HTML 元件範例的目錄，旨在讓您可以複製並貼到您的 Tailwind 專案中，作為您自己設計的起點。
我們將 Tailwind UI 建構為一個僅限 HTML、自行提供 JS 的產品，使其盡可能通用，但許多設計本質上是互動式的，並且不幸的是，在 JavaScript 框架之間移植這些互動行為並不總是那麼容易。
其中一個例子是進入/離開轉場效果，例如當您切換下拉選單時，您會看到它淡入和淡出。
Vue.js 有一個非常棒的 <transition> 元件，用於進入/離開轉場效果，具有非常實用的 API。
<transition enter-active-class="transition-opacity duration-75" enter-from-class="opacity-0" enter-to-class="opacity-100" leave-active-class="transition-opacity duration-150" leave-from-class="opacity-100" leave-to-class="opacity-0"> <div v-show="isShowing"> <!-- Will fade in and out --> </div></transition>但事實證明，在 React 中複製這個效果要困難得多，因為直到現在還沒有一個旨在支援實用導向轉場樣式的程式庫。
因此，本週稍早，我們發布了 @tailwindui/react 的第一個版本，這是一個提供低階基本元素的程式庫，用於將實用優先的 HTML 轉換為完全互動式的 UI。
我們將在未來幾個月內新增更多元件（例如下拉選單、切換開關、模組等等，也適用於 Vue！），但我們認為最好從 <Transition> 元件開始，至少讓目前 React 使用者的 Tailwind UI 體驗達到 Vue 和 Alpine.js 中可能實現的水平。
以下是它的使用方式
import { Transition } from "@tailwindui/react";import { useState } from "react";function MyComponent() { const [isOpen, setIsOpen] = useState(false); return ( <div> <button onClick={() => setIsOpen(!isOpen)}>Toggle</button> <Transition show={isOpen} enter="transition-opacity duration-75" enterFrom="opacity-0" enterTo="opacity-100" leave="transition-opacity duration-150" leaveFrom="opacity-100" leaveTo="opacity-0" > {/* Will fade in and out */} </Transition> </div> );}閱讀文件以了解有關進階功能的更多資訊，例如
- 在沒有額外 DOM 元素的情況下進行渲染
- 協調相關的轉場效果
- 在初始掛載時進行轉場。
在這個 CodeSandbox 演示中查看它的實際效果
在您的專案中試試看，如果您遇到任何問題，請在 GitHub 上報告問題。
想討論這篇文章嗎？在 GitHub 上討論 →