过渡不适用于 HeadlessUI 的 Dialog 组件

Question

我正在使用 Next.JS 14.1.3

我从 HeadlessUI< 添加了 Dialog> 并设置了 TailwindCSS，但是当我尝试在页面上打开模态窗口时，根本没有任何转换，尽管我提供了 示例

中的所有内容

代码

Modal.tsx：

type TProps = {
   isOpened: boolean;
   onClose: VoidFunction;
   children?: ReactNode;
};

export const Modal = ({ isOpened, onClose, children }: TProps) => {
   return (
      <Transition show={isOpened} as={Fragment}>
         <Dialog as="div" className={s.modalWrapper} open={isOpened} onClose={onClose}>
            <Transition.Child
               as={Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0"
               enterTo="opacity-100"
               leave="ease-in duration-200"
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
            >
               <Dialog.Overlay className={s.backdrop} />
            </Transition.Child>

            <Transition.Child
               as={Fragment}
               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.Panel className={s.modal}>{children}</Dialog.Panel>
            </Transition.Child>
         </Dialog>
      </Transition>
   );
};

这是我的称呼（如果重要的话）：

添加产品.tsx：

'use client';

import { useState } from 'react';

import { PlusIcon } from '@/icons';

import s from './AddProduct.module.scss';

import { AddProductModal } from './AddProductModal';

export const AddProductCard = () => {
   const [modalOpened, setModalOpened] = useState<boolean>(false);

   return (
      <>
         <div className={s.addProductCard} onClick={() => setModalOpened(true)}>
            <PlusIcon className={s.plusIcon} />
         </div>

         <AddProductModal
            modalOpened={modalOpened}
            onClose={() => setModalOpened(false)}
         />
      </>
   );
};

所以我添加了

<Transition>

和

<Transition.Child>

这是tailwind.config.js：

/** @type {import('tailwindcss').Config} */
module.exports = {
   purge: ['./src/**/*.{js,ts,jsx,tsx}'],
   content: ['./src/**/*.{js,ts,jsx,tsx}'],
   theme: {
      extend: {},
   },
   variants: {
      extend: {},
   },
   plugins: [],
};

此外，我还安装了postcss、tailwindcss和autoprefixer

Answer 1

我在项目中使用

.module.scss

作为我的样式文件，最后发现如果你包含<Transition>

将会起作用

@tailwind base;
@tailwind components;
@tailwind utilities;

在你的CSS文件中。当我使用 SCSS 时，我刚刚将

.module.scss

更改为

.scss

，这保存了我的 css 文件结构并保存了我的 mixins，现在过渡工作了