Tailwind过渡背景模糊

Question

我正在使用Tailwind，配合他们的HeadlessUI实现模态框上的过渡效果。

https://www.npmjs.com/package/@headlessui/react#transition

<Transition
  show={show}
  enter="transition ease-out duration-300"
  enterFrom="opacity-0 "
  enterTo="opacity-100"
  leave="transition ease-in duration-200"
  leaveFrom="opacity-100"
  leaveTo="opacity-0"
>
    <div className="fixed inset-0 bg-gray-900 bg-opacity-75 backdrop-filter backdrop-blur-sm" aria-hidden="true" />
</Transition>

上述代码可行，但是背景滤镜只在 Transition 组件完成后才应用。
有人知道我怎样才能使过渡也应用于背景滤镜吗？

- K20GH

Answer 1

在 Transition 中添加一个 as={Fragment} 属性。

import { Fragment } from "react";

<Transition
  as={Fragment}
  show={show}
  enter="transition ease-out duration-300"
  enterFrom="opacity-0 "
  enterTo="opacity-100"
  leave="transition ease-in duration-200"
  leaveFrom="opacity-100"
  leaveTo="opacity-0"
>

- hjaber