トランジション

インストール

はじめに、npm経由でHeadless UIをインストールします

npm install @headlessui/react

基本的な例

条件付きでレンダリングされた要素をトランジションするには、それをTransitionコンポーネントでラップし、showプロップを使用して開いているか閉じているかを示します。

次に、ネイティブのCSSトランジションスタイルを使用してアニメーションを適用し、Transitionコンポーネントが公開するdata-closed属性をターゲットにすることで、要素の閉じたスタイルを指定します。

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

function Example() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button onClick={() => setOpen((open) => !open)}>Toggle</button>
      <Transition show={open}>
        <div className="transition duration-300 ease-in data-[closed]:opacity-0">I will fade in and out</div>
      </Transition>
    </>
  )
}

data-closed属性で定義されたスタイルは、トランジションインするときの開始点と、トランジションアウトするときの終了点として使用されます。

より複雑なトランジションの場合、data-enter、data-leave、およびdata-transition属性を使用して、トランジションの異なる段階でスタイルを適用することもできます。

例

異なる進入/退出トランジション

進入時と退出時に異なるトランジションスタイルを適用するには、data-enter属性とdata-leave属性を使用します

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

function Example() {
  const [open, setOpen] = useState(false)

  return (
    <div className="relative">
      <button onClick={() => setOpen((open) => !open)}>Toggle</button>
      <Transition show={open}>
        <div
          className={clsx([
            // Base styles
            'absolute w-48 border transition ease-in-out',
            // Shared closed styles
            'data-[closed]:opacity-0',
            // Entering styles
            'data-[enter]:duration-100 data-[enter]:data-[closed]:-translate-x-full',
            // Leaving styles
            'data-[leave]:duration-300 data-[leave]:data-[closed]:translate-x-full',
          ])}
        >
          I will enter from the left and leave to the right
        </div>
      </Transition>
    </div>
  )
}

この例では、data-enter属性とdata-closed属性を組み合わせて進入トランジションの開始点を指定し、data-leave属性とdata-closed属性を組み合わせて退出トランジションの終了点を指定します。

また、data-enter属性とdata-leave属性を使用して、異なる進入と退出の期間を指定します。

複数のトランジションの調整

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

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

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

function Example() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button onClick={() => setOpen(true)}>Open</button>
      {/* The `show` prop controls all nested `TransitionChild` components. */}
      <Transition show={open}>
        {/* Backdrop */}
        <TransitionChild>
          <div
            className="fixed inset-0 bg-black/30 transition duration-300 data-[closed]:opacity-0"
            onClick={() => setOpen(false)}
          />
        </TransitionChild>

        {/* Slide-in sidebar */}
        <TransitionChild>
          <div className="fixed inset-y-0 left-0 w-64 bg-white transition duration-300 data-[closed]:-translate-x-full">
            {/* ... */}
          </div>
        </TransitionChild>
      </Transition>
    </>
  )
}

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

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

初期マウント時のトランジション

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

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

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

function Example() {
  const [open, setOpen] = useState(true)

  return (
    <>
      <button onClick={() => setOpen((open) => !open)}>Toggle</button>
      <Transition show={open} appear={true}>
        <div className="transition duration-300 ease-in data-[closed]:opacity-0">I will fade in on initial render</div>
      </Transition>
    </>
  )
}

コンポーネントAPI

トランジション

トランジションの子

データ属性