ユーティリティフレンドリーなトランジションと@tailwindui/react

2月に、Tailwind プロジェクトにコピー＆ペーストしてデザインの出発点として使用できるように設計されたHTMLコンポーネントの例のディレクトリであるTailwind UIをリリースしました。

Tailwind UIは、可能な限り普遍的にするためにHTMLのみ、bring-your-own-JS製品として構築しましたが、多くのデザインは本質的にインタラクティブであり、それらのインタラクティブな動作をJavaScriptフレームワーク間で移植することは残念ながら必ずしも容易ではありません。

これの一例は、ドロップダウンメニューを切り替えてフェードイン/フェードアウトするなどの、enter/leaveトランジションです。

Vue.jsには、非常にユーティリティフレンドリーなAPIを備えたenter/leaveトランジション用の非常に便利な<transition>コンポーネントがあります。

<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でこれを再現することははるかに難しいことがわかりました。なぜなら、今日まで、ユーティリティ駆動のトランジションスタイリングをサポートするように設計されたライブラリがなかったからです。

そこで今週初め、ユーティリティファーストHTMLを完全にインタラクティブなUIに変えるための低レベルプリミティブを提供するライブラリである@tailwindui/reactの最初のバージョンをリリースしました。

今後数ヶ月でさらに多くのコンポーネント（ドロップダウン、トグル、モーダルなど、Vue用も！）を追加する予定ですが、少なくともReactユーザー向けの現在のTailwind UIエクスペリエンスをVueおよびAlpine.jsで可能なレベルに引き上げるために、<Transition>コンポーネントから始めることにしました。

使用例はこちらです

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でディスカッション →