使用 @tailwindui/react 实现实用友好的过渡

早在 2 月份，我们发布了 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 上讨论 →