GitHub リポジトリ

Transition

Transitionコンポーネントを使用すると、条件付きでレンダリングされる要素にエンター/リーブトランジションを追加できます。トランジションのさまざまな段階で実際のトランジションスタイルを制御するために、CSSクラスを使用します。

開始するには、npm経由でHeadless UIをインストールします。

npm install @headlessui/react

Transitionは、子要素を表示または非表示にするかどうかを制御するshowプロップと、トランジションの特定のフェーズでCSSクラスを追加できる一連のライフサイクルプロップ（enterFrom、leaveToなど）を受け入れます。

import { Transition } from '@headlessui/react'
import { useState } from 'react'

function MyComponent() {
  const [isShowing, setIsShowing] = useState(false)

  return (
    <>
      <button onClick={() => setIsShowing((isShowing) => !isShowing)}>
        Toggle
      </button>
      <Transition
        show={isShowing}
        enter="transition-opacity duration-75"
        enterFrom="opacity-0"
        enterTo="opacity-100"
        leave="transition-opacity duration-150"
        leaveFrom="opacity-100"
        leaveTo="opacity-0"
      >
        I will fade in and out
      </Transition>
    </>
  )
}

条件付きでレンダリングするコンテンツを<Transition>コンポーネントでラップし、showプロップを使用してコンテンツを表示または非表示にするかどうかを制御します。

import { Transition } from '@headlessui/react'
import { useState } from 'react'

function MyComponent() {
  const [isShowing, setIsShowing] = useState(false)

  return (
    <>
      <button onClick={() => setIsShowing((isShowing) => !isShowing)}>

        Toggle
      </button>
      <Transition show={isShowing}>I will appear and disappear.</Transition>
    </>
  )
}

デフォルトでは、トランジションコンポーネントはdiv要素をレンダリングします。

asプロップを使用して、異なる要素または独自のカスタムコンポーネントとしてコンポーネントをレンダリングします。カスタムコンポーネントがforward refsを使用していることを確認して、Headless UIが正しく接続できるようにします。

import { forwardRef, useState, Fragment } from 'react'
import { Dialog, Transition } from '@headlessui/react'


let MyDialogPanel = forwardRef(function (props, ref) {
  return <Dialog.Panel className="…" ref={ref} {...props} />
})

function MyDialog() {
  let [isOpen, setIsOpen] = useState(true)

  return (
    <Transition

      as={Dialog}
      show={isOpen}
      onClose={() => setIsOpen(false)}
    >
      <Transition.Child

        as={MyDialogPanel}
        enter="ease-out duration-300"
        enterFrom="opacity-0 scale-95"
        enterTo="opacity-100 scale-100"
        leave="ease-in duration-200"
        leaveFrom="opacity-100 scale-100"
        leaveTo="opacity-0 scale-95"
      >
        <Dialog.Title>Deactivate account</Dialog.Title>

        {/* ... */}
      </Transition.Child>
    </Transition>
  )
}

デフォルトでは、Transitionは瞬時にエンターおよびリーブします。このコンポーネントを使用している場合、おそらくこれは望ましい動作ではありません。

エンター/リーブトランジションをアニメーション化するには、これらのプロップを使用して、トランジションの各フェーズのスタイルを提供するクラスを追加します。

  • enter：要素がエンターしている間ずっと適用されます。通常、ここでは期間とトランジションさせたいプロパティを定義します。たとえば、transition-opacity duration-75など。
  • enterFrom：エンターを開始する時点。たとえば、フェードインする場合はopacity-0。
  • enterTo：エンターが終了する時点。たとえば、フェードイン後ならopacity-100。
  • leave：要素がリーブしている間ずっと適用されます。通常、ここでは期間とトランジションさせたいプロパティを定義します。たとえば、transition-opacity duration-75など。
  • leaveFrom：リーブを開始する時点。たとえば、フェードアウトする場合はopacity-100。
  • leaveTo：リーブが終了する時点。たとえば、フェードアウト後ならopacity-0。

例を示します。

import { Transition } from '@headlessui/react'
import { useState } from 'react'

function MyComponent() {
  const [isShowing, setIsShowing] = useState(false)

  return (
    <>
      <button onClick={() => setIsShowing((isShowing) => !isShowing)}>
        Toggle
      </button>

      <Transition
        show={isShowing}
        enter="transition-opacity duration-75"
        enterFrom="opacity-0"
        enterTo="opacity-100"
        leave="transition-opacity duration-150"
        leaveFrom="opacity-100"
        leaveTo="opacity-0"
      >
        I will fade in and out
      </Transition>
    </>
  )
}

この例では、トランジション要素はエンターに75ミリ秒かかります（duration-75クラス）。その間、opacityプロパティがトランジションします（transition-opacity）。

エンターする前は完全に透明になり（enterFromフェーズのopacity-0）、完了すると完全に不透明になります（enterToフェーズのopacity-100）。

要素が削除されている場合（leaveフェーズ）、opacityプロパティがトランジションし、150ミリ秒かかります（transition-opacity duration-150）。

完全に不透明な状態から開始し（leaveFromフェーズのopacity-100）、完全に透明な状態に終了します（leaveToフェーズのopacity-0）。

これらのプロップはすべてオプションであり、デフォルトでは空の文字列になります。

複数の要素を異なるアニメーションでトランジションさせる必要がある場合がありますが、すべて同じ状態に基づいています。たとえば、ユーザーがボタンをクリックして画面上にスライドするサイドバーを開き、同時に背景オーバーレイをフェードインする必要があるとします。

親Transitionコンポーネントで関連する要素をラップし、独自のトランジションスタイルが必要な各子をTransition.Childコンポーネントでラップすることで、これを実行できます。これにより、親Transitionと自動的に通信し、親のshow状態を継承します。

import { Transition } from '@headlessui/react'

function Sidebar({ isShowing }) {
  return (
    /* The `show` prop controls all nested `Transition.Child` components. */
    <Transition show={isShowing}>
      {/* Background overlay */}
      <Transition.Child
        enter="transition-opacity ease-linear duration-300"
        enterFrom="opacity-0"
        enterTo="opacity-100"
        leave="transition-opacity ease-linear duration-300"
        leaveFrom="opacity-100"
        leaveTo="opacity-0"
      >
        {/* ... */}
      </Transition.Child>

      {/* Sliding sidebar */}
      <Transition.Child
        enter="transition ease-in-out duration-300 transform"
        enterFrom="-translate-x-full"
        enterTo="translate-x-0"
        leave="transition ease-in-out duration-300 transform"
        leaveFrom="translate-x-0"
        leaveTo="-translate-x-full"
      >
        {/* ... */}
      </Transition.Child>
    </Transition>
  )
}

Transition.ChildコンポーネントのAPIはTransitionコンポーネントとまったく同じですが、show値は親によって制御されるため、showプロップはありません。

親Transitionコンポーネントは、アンマウントする前に、常にすべての子のトランジションが完了するのを自動的に待機するため、タイミングを自分で管理する必要はありません。

要素を最初にレンダリングしたときにトランジションさせたい場合は、appearプロップをtrueに設定します。

これは、最初のページ読み込み時や親が条件付きでレンダリングされるときに、何かをトランジションさせたい場合に便利です。

import { Transition } from '@headlessui/react'

function MyComponent({ isShowing }) {
  return (
    <Transition

      appear={true}
      show={isShowing}
      enter="transition-opacity duration-75"
      enterFrom="opacity-0"
      enterTo="opacity-100"
      leave="transition-opacity duration-150"
      leaveFrom="opacity-100"
      leaveTo="opacity-0"
    >
      {/* Your content goes here*/}
    </Transition>
  )
}

プロパティデフォルト説明
show—
ブール値

子要素を表示または非表示にするかどうか。

asdiv
文字列 | コンポーネント

Transition自体のかわりにレンダリングする要素またはコンポーネント。

appearfalse
ブール値

初期マウント時にトランジションを実行するかどうか。

unmounttrue
ブール値

show状態に基づいて要素をアンマウントまたは非表示にするかどうか。

enter—
文字列

エンターフェーズ全体でトランジション要素に追加するクラス。

enterFrom—
文字列

エンターフェーズが開始する前にトランジション要素に追加するクラス。

enterTo—
文字列

エンターフェーズが開始した直後にトランジション要素に追加するクラス。

entered—
文字列

トランジションが完了したらトランジション要素に追加するクラス。これらのクラスはその後、リーブするまで保持されます。

leave—
文字列

リーブフェーズ全体でトランジション要素に追加するクラス。

leaveFrom—
文字列

リーブフェーズが開始する前にトランジション要素に追加するクラス。

leaveTo—
文字列

リーブフェーズが開始した直後にトランジション要素に追加するクラス。

beforeEnter—
() => void

エンタートランジションを開始する前に呼び出されるコールバック。

afterEnter—
() => void

エンタートランジションが完了した後に呼び出されるコールバック。

beforeLeave—
() => void

リーブルトランジションを開始する前に呼び出されるコールバック。

afterLeave—
() => void

リーブルトランジションが完了した後に呼び出されるコールバック。

プロパティデフォルト説明
asdiv
文字列 | コンポーネント

Transition自体のかわりにレンダリングする要素またはコンポーネント。

appearfalse
ブール値

初期マウント時にトランジションを実行するかどうか。

unmounttrue
ブール値

show状態に基づいて要素をアンマウントまたは非表示にするかどうか。

enter—
文字列

エンターフェーズ全体でトランジション要素に追加するクラス。

enterFrom—
文字列

エンターフェーズが開始する前にトランジション要素に追加するクラス。

enterTo—
文字列

エンターフェーズが開始した直後にトランジション要素に追加するクラス。

entered—
文字列

トランジションが完了したらトランジション要素に追加するクラス。これらのクラスはその後、リーブするまで保持されます。

leave—
文字列

リーブフェーズ全体でトランジション要素に追加するクラス。

leaveFrom—
文字列

リーブフェーズが開始する前にトランジション要素に追加するクラス。

leaveTo—
文字列

リーブフェーズが開始した直後にトランジション要素に追加するクラス。

beforeEnter—
() => void

エンタートランジションを開始する前に呼び出されるコールバック。

afterEnter—
() => void

エンタートランジションが完了した後に呼び出されるコールバック。

beforeLeave—
() => void

リーブルトランジションを開始する前に呼び出されるコールバック。

afterLeave—
() => void

リーブルトランジションが完了した後に呼び出されるコールバック。

Headless UIとTailwind CSSを使用した、事前にデザインされたコンポーネント例に興味がある場合は、Tailwind UIをご覧ください。これは、私たちが構築した美しくデザインされ、熟練した職人技で作られたコンポーネントのコレクションです。

これは、このようなオープンソースプロジェクトへの私たちの作業を支援する素晴らしい方法であり、それらを改善し、適切に維持することを可能にします。

事前にデザインされたその他の例を見る→