fix: transation new

web/app/components/app/create-app-dialog/newAppDialog.tsx

@@ -1,63 +0,0 @@
-import { Fragment, useCallback } from 'react'
-import type { ReactNode } from 'react'
-import { Dialog, DialogPanel, Transition } from '@headlessui/react'
-import cn from '@/utils/classnames'
-
-type DialogProps = {
-  className?: string
-  children: ReactNode
-  show: boolean
-  onClose?: () => void
-}
-
-const NewAppDialog = ({
-  className,
-  children,
-  show,
-  onClose,
-}: DialogProps) => {
-  const close = useCallback(() => onClose?.(), [onClose])
-  return (
-    <Transition appear show={show} as={Fragment}>
-      <Dialog as="div" className="relative z-40" onClose={close}>
-        {/* <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"
-        >
-          <div className="fixed inset-0 bg-black bg-opacity-25" />
-        </Transition.Child> */}
-        {/* TODO: to new Transition */}
-        <div className="fixed inset-0 bg-black bg-opacity-25" />
-
-        <div className="fixed inset-0">
-          <div className="flex flex-col items-center justify-center min-h-full pt-[56px]">
-            {/* <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"
-            >
-              <DialogPanel className={cn('grow relative w-full h-[calc(100vh-56px)] p-0 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-t-xl', className)}>
-                {children}
-              </DialogPanel>
-            </Transition.Child> */}
-            {/* TODO: to new Transition */}
-            <DialogPanel className={cn('grow relative w-full h-[calc(100vh-56px)] p-0 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-t-xl', className)}>
-              {children}
-            </DialogPanel>
-          </div>
-        </div>
-      </Dialog>
-    </Transition >
-  )
-}
-
-export default NewAppDialog

web/app/components/base/fullscreen-modal/index.tsx

@@ -1,7 +1,7 @@
 import { Dialog, DialogPanel, Transition } from '@headlessui/react'
-import { Fragment } from 'react'
 import { RiCloseLargeLine } from '@remixicon/react'
 import classNames from '@/utils/classnames'
+import { useEffect, useState } from 'react'
 
 type IModal = {
   className?: string
@@ -24,62 +24,42 @@ export default function FullScreenModal({
   closable = false,
   overflowVisible = false,
 }: IModal) {
+  const [showTransition, setShowTransition] = useState(false)
+  useEffect(() => {
+    if (!open) {
+      setShowTransition(false)
+      return
+    }
+    setTimeout(() => {
+      setShowTransition(true)
+    }, 100)
+  }, [open])
   return (
-    <Transition show={open} as={Fragment}>
-      <Dialog as="div" className={classNames('modal-dialog', wrapperClassName)} 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"
-        >
-          <div className="fixed inset-0 bg-background-overlay-backdrop backdrop-blur-[6px]" />
-        </Transition.Child> */}
-        {/* TODO: to new Transition */}
-        <div className="fixed inset-0 bg-background-overlay-backdrop backdrop-blur-[6px]" />
+    <Dialog as="div" className={classNames('modal-dialog', wrapperClassName)} onClose={onClose} open={open}>
+      <Transition show={showTransition}>
+        <div className={classNames(
+          'fixed inset-0 bg-background-overlay-backdrop backdrop-blur-[6px] transition',
+          'data-[closed]:opacity-0',
+          'data-[enter]:ease-out data-[enter]:duration-300 data-[enter]:opacity-100',
+          'data-[leave]:ease-in data-[leave]:duration-200 data-[leave]:opacity-0',
+        )} />
+      </Transition>
 
-        <div
-          className="fixed inset-0 h-screen w-screen p-4"
-          onClick={(e) => {
-            e.preventDefault()
-            e.stopPropagation()
-          }}
-        >
-          <div className="w-full h-full bg-background-default-subtle rounded-2xl border border-effects-highlight relative">
-            {/* <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"
-            >
-              <DialogPanel className={classNames(
-                'h-full',
-                overflowVisible ? 'overflow-visible' : 'overflow-hidden',
-                className,
-              )}>
-                {closable
-                  && <div
-                    className='absolute z-50 top-3 right-3 w-9 h-9 flex items-center justify-center rounded-[10px]
-                  bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover cursor-pointer'
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      onClose()
-                    }}>
-                    <RiCloseLargeLine className='w-3.5 h-3.5 text-components-button-tertiary-text' />
-                  </div>}
-                {children}
-              </DialogPanel>
-            </Transition.Child> */}
-            {/* TODO: to new Transition */}
+      <div
+        className="fixed inset-0 h-screen w-screen p-4"
+        onClick={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+        }}
+      >
+        <div className="w-full h-full bg-background-default-subtle rounded-2xl border border-effects-highlight relative">
+          <Transition show={showTransition}>
             <DialogPanel className={classNames(
-              'h-full',
+              'h-full transition',
               overflowVisible ? 'overflow-visible' : 'overflow-hidden',
+              'data-[closed]:opacity-0',
+              'data-[enter]:ease-out data-[enter]:duration-300 data-[enter]:opacity-100',
+              'data-[leave]:ease-in data-[leave]:duration-200 data-[leave]:opacity-0',
               className,
             )}>
               {closable
@@ -94,9 +74,9 @@ export default function FullScreenModal({
                 </div>}
               {children}
             </DialogPanel>
-          </div>
+          </Transition>
         </div>
-      </Dialog>
-    </Transition>
+      </div>
+    </Dialog>
   )
 }